import clsx from "clsx";

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

function Button({
  children,
  variant = "primary",
  className,
  size = "medium",
  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 select-none cursor-pointer disabled:!cursor-default flex outline-none gap-2 items-center justify-center font-medium disabled:bg-[#F6F6F6] disabled:!text-[#D6D6D6]",
        variant === "menu" &&
          "text-[#7D7D7D] hover:bg-[#F3F3F3] active:bg-[#F3F1FD] active:text-[#7B60F3]",
        variant === "cta" &&
          "bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
        variant === "primary" &&
          "bg-[#F3F1FD] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F3F1FD]",
        variant === "secondary" &&
          "bg-[#FFFFFF] hover:bg-[#F0F0F0] active:text-[#7B60F3] active:bg-[#F3F1FD]",
        variant === "tertiary" &&
          "bg-[#FFFFFF] hover:bg-[#F0F0F0] text-[#7D7D7D] active:text-[#141414] active:bg-[#F3F3F3]",
        variant === "critical" &&
          "text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
        size === "large" &&
          "2xl:p-[1.111vw] p-4 button-m 2xl:rounded-[1.111vw] rounded-2xl",
        size === "medium" &&
          "2xl:p-[0.833vw] p-3 button-s 2xl:rounded-[0.833vw] rounded-xl",
        size === "small" &&
          "2xl:p-[0.556vw] p-2 button-s 2xl:rounded-[0.556vw] rounded-lg",
        className
      )}
    >
      {children}
    </button>
  );
}

export default Button;
