"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

export default function Switch() {
  const [isChecked, setIsChecked] = React.useState(false)

  return (
    <button
      type="button"
      role="switch"
      aria-checked={isChecked}
      onClick={() => setIsChecked(!isChecked)}
      className={cn(
        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 dark:focus:ring-zinc-300 dark:focus:ring-offset-zinc-950",
        isChecked ? "bg-zinc-900 dark:bg-zinc-50" : "bg-zinc-200 dark:bg-zinc-700"
      )}
    >
      <span className="sr-only">Use setting</span>
      <span
        aria-hidden="true"
        className={cn(
          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
          isChecked ? "translate-x-5" : "translate-x-0"
        )}
      />
    </button>
  )
}