import clsx from "clsx";

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

function Button({
  children,
  variant = "primary",
  className,
  size = "medium",
  ref,
  onClick,
  ...props
}: ButtonProps) {
  return (
    <button
      ref={ref}
      {...props}
      onClick={(e) => {
        onClick?.(e);
      }}
      className={clsx(
        "transition-colors select-none cursor-pointer disabled:!cursor-default flex outline-none 2xl:gap-[0.556vw] gap-2 items-center justify-center disabled:bg-[#C4C4C4] disabled:!text-[#FFFFFF]",
        variant === "cta" &&
          "bg-[#F47F52] text-white hover:bg-[#F3713F] active:bg-[#F47F52]",
        variant === "primary" &&
          "bg-[#F0EDE6] text-[#324D43] hover:bg-[#EAE6DC] active:text-white active:bg-[#F47F52]",
        variant === "secondary" &&
          "bg-transparent text-[#324D43] disabled:bg-transparent",
        variant === "fab" &&
          "bg-[#FFFFFF33] 2xl:backdrop-blur-[0.278vw] backdrop-blur-[4px] text-white active:bg-[#F47F52] disabled:bg-[#FFFFFF33] ring-1 ring-[#FFFFFF33]",
        size === "large" &&
          "2xl:p-[0.972vw] p-[14px] button-l 2xl:rounded-[1.111vw] rounded-2xl",
        size === "medium" &&
          "2xl:p-[0.833vw] p-3 button-m 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;
