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

interface FloatingActionButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "default" | "critical";
  ref?: React.RefObject<HTMLButtonElement | null>;
}

function FloatingActionButton({
  children,
  variant = "default",
  className,
  onClick,
  disabled,
  ref,
  ...props
}: FloatingActionButtonProps) {
  return (
    <button
      onClick={onClick}
      ref={ref}
      disabled={disabled}
      className={clsx(
        "2xl:p-[0.833vw] p-3 rounded-full transition-all cursor-pointer disabled:!cursor-default outline-none backdrop-blur-[10px]",
        variant === "default" &&
          "2xl:border-[0.069vw] border border-[#FFFFFF]/15 bg-[#000000]/15 hover:bg-[#000000]/25 hover:border-[#FFFFFF]/25 enabled:active:bg-[#7B60F3] enabled:active:border-[#FFFFFF]/25",
        variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
        className
      )}
      {...props}
    >
      {children}
      {disabled && (
        <div className="absolute 2xl:-top-[0.139vw] 2xl:-right-[0.139vw] -top-0.5 -right-0.5">
          <Warning type="critical" className="text-white" />
        </div>
      )}
    </button>
  );
}

export default FloatingActionButton;
