"use client";

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

interface CheckboxProps
  extends Omit<
    ComponentProps<"input">,
    "checked" | "defaultChecked" | "onChange" | "type"
  > {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
}

function Checkbox({
  className,
  checked,
  defaultChecked,
  onCheckedChange,
  ...props
}: CheckboxProps) {
  return (
    <input
      checked={checked}
      className={cn(
        "h-4 w-4 cursor-pointer rounded-[4px] border border-input accent-primary outline-none transition-shadow focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
        className
      )}
      data-slot="checkbox"
      defaultChecked={defaultChecked}
      onChange={(event) => onCheckedChange?.(event.target.checked)}
      type="checkbox"
      {...props}
    />
  );
}

export { Checkbox };
