/* eslint-disable jsx-a11y/label-has-associated-control */

"use client";

import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import type { VariantProps } from "class-variance-authority";
import { Check } from "lucide-react";
import type { ReactNode } from "react";
import { forwardRef } from "react";

import { cn } from "@/libs/utils";

import { checkboxVariants, labelVariants } from "./checkbox.variants";

export interface CheckboxProps
  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
    VariantProps<typeof checkboxVariants>,
    VariantProps<typeof labelVariants> {
  id: string;
  label: string | ReactNode;
  labelClassname?: React.ComponentProps<"div">["className"];
}

const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
  (
    {
      className,
      labelClassname = "",
      variant,
      size,
      rounded,
      label,
      labelTextSize,
      id,
      ...props
    },
    ref,
  ) => (
    <div className="flex items-center gap-2">
      <CheckboxPrimitive.Root
        id={id}
        ref={ref}
        className={cn(
          checkboxVariants({
            variant,
            size,
            rounded,
            className,
          }),
        )}
        {...props}
      >
        <CheckboxPrimitive.Indicator
          className={cn("flex items-center justify-center text-current")}
        >
          <Check
            className={cn(
              checkboxVariants({
                size,
                className,
              }),
              "border-none",
            )}
          />
        </CheckboxPrimitive.Indicator>
      </CheckboxPrimitive.Root>
      <label
        htmlFor={id}
        className={cn(
          labelVariants({
            labelTextSize,
            className: labelClassname,
          }),
        )}
      >
        {label}
      </label>
    </div>
  ),
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

export { Checkbox, checkboxVariants };