export function ToggleSwitch({ checked, onChange, label }) {
return (
<label className="flex items-center gap-3 cursor-pointer select-none">
<button
role="switch"
aria-checked={checked}
onClick={() => onChange(!checked)}
className={`relative h-6 w-11 rounded-full transition-colors
${checked ? "bg-indigo-600" : "bg-slate-300"}`}
>
<span
className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform
${checked ? "translate-x-5" : "translate-x-0.5"}`}
/>
</button>
{label && <span className="text-sm text-slate-700">{label}</span>}
</label>
);
}