import React, { useId } from 'react';

interface BooleanInputProps {
    value: boolean | string;
    onChange: (value: string) => void;
    label?: string;
}

export default function BooleanInput({ value, onChange, label = '' }: BooleanInputProps) {
    const id = useId();
    const checked = value === true || value === 'true';

    return (
        <div className="flex items-center">
            <input
                type="checkbox"
                id={id}
                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                checked={checked}
                onChange={(e) => onChange(e.target.checked ? 'true' : 'false')}
            />
            {label && (
                <label htmlFor={id} className="ml-2 text-sm text-gray-700">
                    {label}
                </label>
            )}
        </div>
    );
}