"use client"
import * as React from "react"
import { cn } from "../../lib/utils"

interface ToggleSwitchProps {
  checked: boolean
  onChange: (value: boolean) => void
  id?: string
  disabled?: boolean
  "aria-label"?: string
  "aria-labelledby"?: string
}

export function ToggleSwitch({
  checked,
  onChange,
  id,
  disabled = false,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
}: ToggleSwitchProps) {
  return (
    <button
      id={id}
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : checked ? "On" : "Off")}
      aria-labelledby={ariaLabelledBy}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-input transition-colors",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
        "disabled:cursor-not-allowed disabled:opacity-50",
        checked ? "bg-[var(--switch-on)]" : "bg-input"
      )}
    >
      <span className={cn(
        "pointer-events-none inline-block size-4 rounded-full bg-primary-foreground shadow-sm transition-transform",
        checked ? "translate-x-4" : "translate-x-0"
      )} />
    </button>
  )
}