interface CategoryToggleProps {
    checked: boolean;
    disabled?: boolean;
    onChange: () => void;
}

const CategoryToggle = ({ checked, disabled, onChange }: CategoryToggleProps) => (
    <label className="relative inline-flex items-center shrink-0 cursor-pointer">
        <input
            type="checkbox"
            checked={checked}
            disabled={disabled}
            onChange={onChange}
            className="sr-only peer disabled:pointer-events-none"
        />
        <div className="w-9 h-5 bg-neutral-200 rounded-full peer-checked:bg-gradient-to-br from-primary to-accent peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-4 after:w-4 after:shadow-soft after:transition-all peer-disabled:opacity-50 peer-disabled:cursor-not-allowed" />
    </label>
);

export default CategoryToggle;