interface Props {
  variant?: "primary" | "secondary";
  size?: "large" | "medium" | "small";
  roundedFull?: boolean;
  icon?: JSX.Element;
  onlyIcon?: boolean;
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
}

const variantClasses = {
  primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]",
  secondary: "bg-white hover:text-[#0D1922]",
};

const sizeClasses = {
  large: "px-4 py-3 gap-2 text-base",
  medium: "px-3.5 py-2.5 gap-1 text-sm",
  small: "px-3 py-2.5 gap-1 text-xs",
};

function Button2({
  variant = "primary",
  size = "medium",
  roundedFull = false,
  icon,
  onlyIcon = false,
  children,
  className,
  onClick,
}: Props) {
  return (
    <button
      className={`flex items-center justify-center transition-colors w-fit ${
        variantClasses[variant]
      } ${sizeClasses[size]} ${
        roundedFull ? "rounded-full" : "rounded-lg"
      } ${className}`}
      onClick={onClick}
    >
      {onlyIcon ? (
        icon
      ) : (
        <>
          {icon}
          {children}
        </>
      )}
    </button>
  );
}

export default Button2;