import clsx from "clsx";

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

function FloatingActionButton({
  children,
  variant = "default",
  className,
  onClick,
  ref,
  ...props
}: FloatingActionButtonProps) {
  return (
    <button
      onClick={onClick}
      ref={ref}
      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 active:bg-[#7B60F3] active:border-[#FFFFFF]/25",
        variant === "critical" && "bg-[#FF4517] hover:bg-[#FF4517]/85",
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

export default FloatingActionButton;