import classNames from "classnames";
import { CheckIcon, XIcon } from "@heroicons/react/solid";

export const Switch = ({
  value,
  disabled = false,
  size = "medium",
  className,
  onChange = () => {},
}: any) => {
  return (
    <div
      className={classNames(
        `rounded-full cursor-pointer p-1 shadow ${className}`,
        {
          "bg-opacity-30 bg-white": !value,
          "bg-darkGreen": value,
          "opacity-50 cursor-not-allowed": disabled,
          "h-7 w-12 min-w-[3rem]": size === "medium",
          "h-6 w-10 min-w-[2.5rem]": size === "small",
        }
      )}
      onClick={disabled ? () => {} : () => onChange(!value)}
    >
      <div
        className={classNames(
          "bg-white rounded-full transition-transform duration-200 transform flex items-center justify-center",
          {
            "translate-x-full": value,
            "h-5 w-5": size === "medium",
            "h-4 w-4": size === "small",
          }
        )}
      >
        {value ? (
          <CheckIcon className="h-3 w-3 text-darkGreen font-bold" />
        ) : (
          <XIcon className="h-3 w-3 text-dark font-bold" />
        )}
      </div>
    </div>
  );
};