import { useEffect, useState } from "react";
import CheckIcon from "@/components/icons/CheckIcon";

function CustomCheckbox({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string, checked: boolean) => void;
}) {
  const [checked, setChecked] = useState<boolean>(false);

  useEffect(() => {
    onChange(value, checked);
  }, [checked, onChange, value]);

  return (
    <>
      <div
        onClick={() => setChecked(!checked)}
        className="flex gap-x-[10px] items-center hover:cursor-pointer"
      >
        <div
          className={`${
            checked ? "bg-gradient" : "bg-[#37393B]"
          } w-[20px] h-[20px] radius-[5px] rounded relative`}
        >
          {checked && (
            <div className="text-white lg:size-[1.389vw] size-4 absolute top-0">
              <CheckIcon />
            </div>
          )}
        </div>
        <span className="md:text-sm">{value}</span>
      </div>
    </>
  );
}

export default CustomCheckbox;
