import clsx from "clsx";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  variant?: "critical" | "secondary" | "primary" | "cta" | "menu";
  className?: string;
  size?: "small" | "medium" | "large";
  ref?: React.RefObject<HTMLButtonElement | null>;
}

function Button({
  children,
  variant = "cta",
  size = "medium",
  className,
  ref,
  type,
  onClick,
  ...props
}: ButtonProps) {
  return (
    <button
      ref={ref}
      {...props}
      onClick={(e) => {
        if (type !== "submit" && variant !== "menu") e.preventDefault();
        onClick?.(e);
      }}
      className={clsx(
        "transition-all flex outline-none 2xl:gap-[0.556vw] gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
        variant === "critical" &&
          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
        variant === "secondary" &&
          "bg-[#F6F6F6] hover:bg-[#F0F0F0] active:text-[#7D7D7D] active:bg-[#F6F6F6]",
        variant === "primary" &&
          "bg-[#F8F7FE] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F8F7FE]",
        variant === "cta" &&
          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
        variant === "menu" &&
          "text-[#7D7D7D] hover:bg-[#F0F0F0] active:bg-[#F8F7FE] active:text-[#7B60F3] disabled:text-[#D6D6D6] disabled:bg-[#F6F6F6] hover:text-[#7B60F3]",
        size === "large" &&
          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[0.833vw] rounded-xl",
        size === "medium" &&
          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
        size === "small" &&
          "2xl:p-[0.556vw] p-2 text-[10px] 2xl:rounded-[0.556vw] rounded-lg",
        className
      )}
    >
      {children}
    </button>
  );
}

export default Button;
