import MinusIcon from "./icons/MinusIcon";
import SelectedCheckboxIcon from "./icons/SelectedCheckboxIcon";
import { ICheckbox } from "../types/checkbox";

interface CheckboxProps {
  onClick: (id: string) => void;
  checkbox: ICheckbox;
}

const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
  return (
    <div
      onClick={() => onClick(checkbox.id)}
      className={`flex justify-between bg-white p-3 rounded-lg  transition-[background] duration-300 ease-in-out select-none ${
        checkbox.disabled
          ? "pointer-events-none touch-none"
          : "hover:bg-[#F3F3F2] cursor-pointer"
      }`}
    >
      <div className="flex gap-3">
        {checkbox.disabled ? (
          <div className="bg-[#E2E2DC] rounded-[4px] w-6 h-6 text-white flex justify-center items-center">
            <MinusIcon />
          </div>
        ) : (
          <div
            className={` rounded-[4px] w-6 h-6 flex justify-center items-center ease-in-out duration-300 transition-[background] ${
              checkbox.selected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
            }`}
          >
            {checkbox.selected ? <SelectedCheckboxIcon /> : <></>}
          </div>
        )}
        <p className="text-s text-[#73787C]">{checkbox.title}</p>
      </div>
      {!checkbox.disabled ? (
        <div className="bg-[#00BED7] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s ">
          <div className="h-fit align-middle text-center flex items-center justify-center leading-1">
            8
          </div>
        </div>
      ) : (
        <div className="bg-[#E2E2DC] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s">
          <div className="h-fit align-middle text-center flex">
            <MinusIcon />
          </div>
        </div>
      )}
    </div>
  );
};

export default Checkbox;