import clsx from "clsx";
import Warning from "../indicators/Warning";
import Tooltip from "./Tooltip";

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

function ControlButton({
  size,
  icon,
  className,
  disabled,
  onClick,
  ...props
}: ControlButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      {...props}
      className={clsx(
        "backdrop-blur-[10px]a relative rounded-full transition-colors cursor-pointer outline-none disabled:!cursor-default",
        size === "large"
          ? "2xl:p-[0.833vw] p-3 bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
          : "2xl:p-[0.417vw] p-[6px] 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>
      {disabled && size === "large" && (
        <Tooltip
          label="Нет доступа"
          className="absolute 2xl:-top-[0.139vw] 2xl:-right-[0.139vw] -top-0.5 -right-0.5"
        >
          <Warning type="critical" className="text-white" />
        </Tooltip>
      )}
    </button>
  );
}

export default ControlButton;