import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";

import { cn } from "../lib/utils";

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "focus-visible:tw-figr-ring-ring tw-figr-border-custom-primary data-[state=checked]:tw-figr-bg-custom-primary data-[state=checked]:tw-figr-text-custom-base-white focus-visible:tw-figr-ring-1 tw-figr-border-primary data-[state=checked]:tw-figr-bg-primary data-[state=checked]:tw-figr-text-base-white tw-figr-h-4 tw-figr-w-4 tw-figr-shrink-0 tw-figr-rounded-full tw-figr-border tw-figr-shadow focus-visible:tw-figr-outline-none disabled:tw-figr-cursor-not-allowed disabled:tw-figr-opacity-50 peer",
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn(
        "tw-figr-text-current tw-figr-flex items-center justify-center"
      )}
    >
      <Check className="tw-figr-h-4 tw-figr-w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

export { Checkbox };