import clsx from "clsx";

interface SwitchProps {
  enabled: boolean;
  onChange: (enabled: boolean) => void;
}

function Switch({ enabled, onChange }: SwitchProps) {
  return (
    <div
      onClick={() => onChange(!enabled)}
      className={clsx(
        "2xl:rounded-[0.833vw] rounded-xl 2xl:w-[2.778vw] w-10 2xl:py-[0.139vw] py-[2px] cursor-pointer transition-colors",
        enabled ? "bg-[#7B60F3]" : "bg-[#F0F0F0]"
      )}
    >
      <div
        className={clsx(
          "rounded-full 2xl:size-[1.389vw] size-5 bg-white shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] transition-all",
          enabled
            ? "2xl:translate-x-[1.25vw] translate-x-[18px]"
            : "2xl:translate-x-[0.139vw] translate-x-[2px]"
        )}
      />
    </div>
  );
}

export default Switch;