import { useState } from "react";
import MinusIcon from "./icons/MinusIcon";
import SelectedCheckboxIcon from "./icons/SelectedCheckboxIcon";

interface CheckboxProps {
  title: string;
  disabled?: boolean;
}

const Checkbox = ({ title, disabled }: CheckboxProps) => {
  const [isSelected, setIsSelected] = useState(false);

  const handleOnClick = () => {
    if (!disabled) {
      setIsSelected((prev) => !prev);
    }
  };

  return (
    <div
      onClick={handleOnClick}
      className={`flex justify-between bg-white p-3 rounded-2xl  transition-[background] duration-300 ease-in-out select-none ${
        disabled ? "" : "hover:bg-[#F3F3F2] cursor-pointer"
      }`}
    >
      <div className="flex gap-3">
        {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] ${
              isSelected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
            }`}
          >
            {isSelected ? <SelectedCheckboxIcon /> : <></>}
          </div>
        )}
        <p className="text-s text-[#73787C]">{title}</p>
      </div>
      {!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">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;
