// components/ui/checkbox.tsx
"use client";
import React, { InputHTMLAttributes, useState } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../../lib/utils";
import { MdCheck } from "react-icons/md";

interface CustomCheckboxProps
  extends InputHTMLAttributes<HTMLInputElement>,
    VariantProps<typeof checkboxVariants> {
  customProperty?: string;
  checkedClassName?: string;
  uncheckedClassName?: string;
  className?: string; 
  icon?: React.ReactNode; 
}

const checkboxVariants = cva(
  "form-checkbox size-4 transition flex items-center rounded-sm ",
  {
    variants: {
      state: {
        checked: "checked bg-primary",
        unchecked: "unchecked border border-primary",
      },

      disable: {
        true: 'disabled bg-primary opacity-20 pointer-events-none', 
        false: '',
      },
    },
    defaultVariants: {
      state: "unchecked",
    },
  }
);

export const CustomCheckbox: React.FC<CustomCheckboxProps> = ({
  customProperty = "Default Custom Text",
  disable,
  checkedClassName,
  uncheckedClassName,
  className,
  icon = <MdCheck />, 
  ...props
}) => {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <label className={`flex items-center space-x-2 ${className || ''}`}>
      <div
        className={cn(
          checkboxVariants({ state: isChecked ? "checked" : "unchecked", disable }),
          isChecked ? checkedClassName : uncheckedClassName
        )}
        onClick={handleCheckboxChange}
        {...props}
      >
        {isChecked && <span className="text-white">{icon}</span>}
      </div>
      <span className="text-secondary-foreground">{props.children || "Check me"}</span>
    </label>
  );
};