import { useState } from "react";

const Switch = () => {
  const [isSwitched, setIsSwitched] = useState(false);
  function handleOnClick() {
    setIsSwitched((prev) => !prev);
  }

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

export default Switch;
