dishplanner/frontend-old/app/components/ui/Toggle.tsx

interface ToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
}

const Toggle = ({ checked, onChange }: ToggleProps) => {
    const handleChange = () => {
        onChange(checked);
    }

    return (
        <label
            className="flex items-center relative w-max cursor-pointer select-none"
        >
            {/* Hidden input */}
            <input
                type="checkbox"
                checked={checked}
                onChange={() => handleChange()} // Update state using the checkbox itself
                className="sr-only"
            />

            {/* Toggle text-accent-blue */}
            <div
                className={`relative transition-colors w-14 h-7 rounded-full cursor-pointer ${
                    checked ? "bg-green-500" : "bg-red-500"
                }`}
            >
                {/* The slider dot */}
                <span
                    className={`absolute top-0.5 left-0.5 w-6 h-6 rounded-full transform transition-transform bg-white ${
                        checked ? "translate-x-7" : "translate-x-0"
                    }`}
                ></span>
            </div>
        </label>
    );
};

export default Toggle;