"use client";

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

export interface CheckboxProps
  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "children"> {
  label: React.ReactNode;
}

export const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps
>(({ label, id, className, ...props }, ref) => {
  const autoId = React.useId();
  const inputId = id ?? autoId;

  return (
    <div className="flex items-start gap-2.5">
      <CheckboxPrimitive.Root
        ref={ref}
        id={inputId}
        className={cn(
          "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-paper",
          "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
          "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
          className
        )}
        {...props}
      >
        <CheckboxPrimitive.Indicator>
          <Check className="size-3.5 text-primary-contrast" aria-hidden="true" />
        </CheckboxPrimitive.Indicator>
      </CheckboxPrimitive.Root>
      <label htmlFor={inputId} className="text-body-sm text-ink-soft">
        {label}
      </label>
    </div>
  );
});
Checkbox.displayName = "Checkbox";