"use client"

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

export default function Checkbox() {
  const [checked, setChecked] = React.useState(false)

  return (
    <div className="flex items-center space-x-2">
      <button
        type="button"
        role="checkbox"
        aria-checked={checked}
        onClick={() => setChecked(!checked)}
        className={cn(
          "peer h-4 w-4 shrink-0 rounded-sm border border-zinc-900 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-50 dark:focus-visible:ring-zinc-300",
          checked ? "bg-zinc-900 text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900" : "bg-transparent"
        )}
      >
        <span className={cn("flex items-center justify-center", checked ? "opacity-100" : "opacity-0")}>
          <Check className="h-3 w-3" />
        </span>
      </button>
      <label
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-zinc-900 dark:text-zinc-200"
        onClick={() => setChecked(!checked)}
      >
        Accept terms and conditions
      </label>
    </div>
  )
}