import clsx from "clsx";

interface ControlButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size: "small" | "large";
  icon: React.ReactNode;
  enabled: boolean;
}

function ControlButton({
  size,
  enabled,
  icon,
  className,
  onClick,
  ...props
}: ControlButtonProps) {
  return (
    <button
      onClick={onClick}
      {...props}
      className={clsx(
        "backdrop-blur-[10px] rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none",
        size === "large" ? "2xl:p-[0.833vw] p-3" : "2xl:p-[0.417vw] p-[6px]",
        !enabled
          ? "bg-[#FF4517] hover:bg-[#FF4517]/85"
          : size === "large"
          ? "bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
          : "bg-[#141414]/15 hover:bg-[#141414]/25",
        className
      )}
    >
      <div
        className={clsx(
          "text-white",
          size === "large"
            ? "2xl:size-[1.111vw] size-4"
            : "2xl:size-[0.833vw] size-3"
        )}
      >
        {icon}
      </div>
    </button>
  );
}

export default ControlButton;
