import { ISwitcher } from "../types/switcher";

interface ISwitchProps {
  switcher: ISwitcher;
  onClick: ((id: string) => void) | (() => void);
}

const Switch = ({ switcher, onClick }: ISwitchProps) => {
  function handleOnClick() {
    onClick(switcher.id);
  }

  return (
    <div
      className={`w-[40px] h-[24px] zoom-280  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
        switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
      }`}
      onClick={handleOnClick}
    >
      <div
        className={`w-[20px] h-[20px] bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px] 
         ${switcher.isSwitched ? "left-[18px]" : "left-[2px]"}`}
      ></div>
    </div>
  );
};

export default Switch;