import { Controller } from "react-hook-form";

type checkboxProps = {
  label?: string;
  checked?: boolean;
  formOptions: any;
  id: string;
  groupName:string
};

const CustomCheckbox = (props: checkboxProps) => {
  return (
    <Controller
      control={props.formOptions.control}
      name={props.groupName}
      
      render={({ field }) => (
        <div className="flex gap-2 items-center">
          <input
            type="checkbox"
        
            onChange={(e) => {
              const checked = e.target.checked;
             
              // Updating 'types' with either adding or removing the value
              if (checked) {
                field.onChange([...field.value, props.id]); // Add to the array if checked
              } else {
                field.onChange(field.value.filter((val: string) => val !== props.id)); // Remove from the array if unchecked
              }
            }}
            checked={field?.value?.includes(props.id)} // Only checked if the value exists in the array
            className="w-5 h-5 appearance-none checked:bg-secondaryBg checked:border-secondaryBg checked:border-none border-[.7px] border-[#6B665F] rounded-[2px] focus:outline-none cursor-pointer checked:after:content-['✓'] checked:after:text-white checked:after:block checked:after:text-center checked:after:justify-start"
          />
          {props.label && props.label}
        </div>
      )}
    />
  );
};

export default CustomCheckbox;