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

interface SurrealToggleProps {
  defaultChecked?: boolean
  onChange?: (checked: boolean) => void
  label?: string
  className?: string
}

export function SurrealToggle({ defaultChecked = false, onChange, label, className }: SurrealToggleProps) {
  const [checked, setChecked] = useState(defaultChecked)

  const handleToggle = () => {
    const newValue = !checked
    setChecked(newValue)
    onChange?.(newValue)
  }

  return (
    <label className={cn("inline-flex items-center gap-3 cursor-pointer", className)}>
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        onClick={handleToggle}
        className={cn(
          "relative w-12 h-6 rounded-full transition-all duration-300",
          checked ? "bg-primary" : "bg-secondary",
        )}
      >
        <span
          className={cn(
            "absolute top-1 w-4 h-4 rounded-full bg-foreground transition-all duration-300",
            checked ? "left-7" : "left-1",
          )}
        />
      </button>
      {label && <span className="text-sm text-foreground">{label}</span>}
    </label>
  )
}