Checkbox

"use client";

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

export interface CheckboxProps {
  checked?: boolean | "indeterminate";
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  id?: string;
  className?: string;
  "aria-label"?: string;
}

export function Checkbox({ checked, defaultChecked = false, onCheckedChange, disabled, id, className, ...aria }: CheckboxProps) {
  const [internal, setInternal] = React.useState(defaultChecked);
  const state = checked ?? internal;
  const on = state === true;
  const mixed = state === "indeterminate";

  return (
    <button
      type="button"
      role="checkbox"
      id={id}
      aria-checked={mixed ? "mixed" : on}
      aria-label={aria["aria-label"]}
      disabled={disabled}
      onClick={() => {
        const next = !on;
        if (checked === undefined) setInternal(next);
        onCheckedChange?.(next);
      }}
      className={cn(
        "grid size-[18px] shrink-0 place-items-center rounded-[5px] border outline-none transition-colors duration-150",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:opacity-40",
        on || mixed ? "border-primary bg-primary text-primary-foreground" : "border-input bg-transparent hover:border-foreground/40",
        className,
      )}
    >
      <svg viewBox="0 0 16 16" fill="none" className="size-3" aria-hidden>
        <motion.path
          d={mixed ? "M4 8h8" : "M3.5 8.5l3 3 6-7"}
          stroke="currentColor"
          strokeWidth={2.2}
          strokeLinecap="round"
          strokeLinejoin="round"
          initial={false}
          animate={{ pathLength: on || mixed ? 1 : 0, opacity: on || mixed ? 1 : 0 }}
          transition={{ duration: 0.22, ease: [0.2, 0.8, 0.2, 1] }}
        />
      </svg>
    </button>
  );
}