import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";

type ButtonVariant = "solid" | "outline" | "gradient-border" | "gradient-fill" | "simple";

interface AieroButtonProps {
  href?: string;
  variant?: ButtonVariant;
  children: React.ReactNode;
  className?: string;
  showArrow?: boolean;
  target?: string;
  onClick?: () => void;
}

export function AieroButton({
  href = "#",
  variant = "solid",
  children,
  className = "",
  showArrow = true,
  target,
  onClick,
}: AieroButtonProps) {
  const baseClasses = "aiero-button";

  const variantClasses: Record<ButtonVariant, string> = {
    solid: "aiero-button-solid",
    outline: "aiero-button-solid",
    "gradient-border": "aiero-button-gradient-border",
    "gradient-fill": "aiero-button-gradient-fill",
    simple: "",
  };

  const combined = `${baseClasses} ${variantClasses[variant]} ${className}`;

  return (
    <a
      href={href}
      target={target}
      className={combined}
      onClick={onClick}
      rel={target === "_blank" ? "noopener noreferrer" : undefined}
    >
      {children}
      {showArrow && <ArrowIcon className="w-3 h-3" />}
      {(variant === "gradient-border" || variant === "gradient-fill") && (
        <span className="button-inner" />
      )}
    </a>
  );
}