import type { ReactNode } from 'react';
import { Label } from './Label';

type FormProps = {
    title: string;
    titleBarRight?: ReactNode;
    children: ReactNode;
    className?: string;
};

export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
    return (
        <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
            <div
                className="flex items-center justify-between border-b px-4 py-3 sm:px-5"
                style={{ borderColor: 'var(--surface-divider)' }}
            >
                <Label variant="h4">{title}</Label>
                {titleBarRight ? <div>{titleBarRight}</div> : null}
            </div>

            <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">{children}</div>
        </div>
    );
}