type Props = {
  checked: boolean;
  onClick: () => void;
};

const ToggleButton = ({ checked, onClick }: Props) => {
  return (
    <div>
      <span
        className="inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer"
        onClick={onClick}
      >
        <span className="h-full w-full rounded-lg bg-t_bg_tertiary bg-opacity-30"></span>
        <span
          className={`transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
          ${
            checked
              ? "translate-x-[12px] bg-t_main_accent_light"
              : "bg-t_bg_tertiary"
          } `}
        ></span>
      </span>
    </div>
  );
};

ToggleButton.displayName = "ToggleButton";
export { ToggleButton };