interface ButtonProps {
  type?: "button" | "reset" | "submit";
  variant?: "primary" | "secondary" | "tertiary";
  fullWidth?: boolean;
  large?: boolean;
  icon?: JSX.Element;
  onlyIcon?: boolean;
  disabled?: boolean;
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
}

function Button({
  type = "button",
  variant = "primary",
  fullWidth,
  large,
  icon,
  onlyIcon,
  disabled,
  children,
  className,
  onClick,
}: ButtonProps) {
  const variantClasses = [
    {
      name: "primary",
      classes:
        "enabled:bg-[#49A1F5] enabled:hover:bg-[#4190DB] enabled:text-white disabled:bg-[#F2F2F2] disabled:text-[#CCCCCC]",
    },
    {
      name: "secondary",
      classes:
        "enabled:bg-[#F0F1F2] enabled:hover:bg-[#E6ECF2] enabled:text-[#77828C] disabled:bg-[#F2F2F2] disabled:text-[##CCCCCC]",
    },
    {
      name: "tertiary",
      classes:
        "enabled:hover:bg-[#E6ECF2] enabled:text-[#77828C] disabled:text-[#CCCCCC]",
    },
  ];

  return (
    <button
      disabled={disabled}
      type={type}
      className={`rounded-lg text-sm font-semibold transition-colors flex items-center justify-center gap-1 outline-none ${
        variantClasses.find((item) => item.name === variant)?.classes
      } ${fullWidth ? "w-full" : "w-fit"} ${
        large
          ? `h-10  ${onlyIcon ? "p-2" : icon ? "pl-4 pr-6" : "px-4"}`
          : `h-8 ${onlyIcon ? "p-1" : icon ? "pl-2 pr-4" : "px-6"}`
      } ${className}`}
      onClick={onClick}
    >
      {icon}
      {children}
    </button>
  );
}

export default Button;
