import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { cn } from '@/lib/utils';

type FormFieldProps = {
    label: string;
    htmlFor: string;
    error?: string;
    className?: string;
    children: React.ReactNode;
};

export function FormField({
    label,
    htmlFor,
    error,
    className,
    children,
}: FormFieldProps) {
    return (
        <Field
            className={cn('gap-2', className)}
            data-invalid={error ? true : undefined}
        >
            <FieldLabel htmlFor={htmlFor}>{label}</FieldLabel>
            {children}
            <FieldError>{error}</FieldError>
        </Field>
    );
}