frontend/src/components/ui/switch.tsx

import { cn } from "@/lib/utils"

export function Switch({
  checked,
  onCheckedChange,
  id,
}: {
  checked: boolean
  onCheckedChange: (v: boolean) => void
  id?: string
}) {
  return (
    <button
      id={id}
      role="switch"
      aria-checked={checked}
      onClick={() => onCheckedChange(!checked)}
      className={cn(
        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        checked ? "border-primary/50 bg-primary/30" : "border-border bg-white/5",
      )}
    >
      <span
        className={cn(
          "ml-0.5 size-3.5 rounded-full transition-transform",
          checked ? "translate-x-4 bg-primary" : "translate-x-0 bg-muted-foreground",
        )}
      />
    </button>
  )
}