import { type InputHTMLAttributes } from 'react';

import { formLabelClassName } from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

type FormCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
    label: string;
};

/** Synto template checkbox (`ti-form-checkbox` from `_forms.scss`). */
export function FormCheckbox({ id, label, className, ...props }: FormCheckboxProps) {
    const checkboxId = id ?? label.toLowerCase().replace(/\s+/g, '-');

    return (
        <div className="flex items-center">
            <input
                type="checkbox"
                id={checkboxId}
                className={cn('ti-form-checkbox', className)}
                {...props}
            />
            <label htmlFor={checkboxId} className={cn(formLabelClassName, 'mb-0 ms-2 font-normal')}>
                {label}
            </label>
        </div>
    );
}