import { type InputHTMLAttributes } from 'react';

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

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

export function FormSwitch({ id, label, checked, className, ...props }: FormSwitchProps) {
    const switchId = id ?? label.toLowerCase().replace(/\s+/g, '-');

    return (
        <div className={cn('flex items-center mb-4', className)}>
            <input type="checkbox" id={switchId} className="ti-switch shrink-0" checked={Boolean(checked)} {...props} />
            <label htmlFor={switchId} className={choiceLabelClassName}>
                {label}
            </label>
        </div>
    );
}