import React from "react";

export interface FAIconProps {
  /** Icon name without the fa- prefix e.g. "magnifying-glass", "user", "gear", "cart-shopping", "bars", "xmark" */
  name: string;
  /** Icon style prefix or inline CSS style object */
  style?: "solid" | "regular" | "brands" | React.CSSProperties;
  /** Optional custom CSS classes for sizing, colors, or positioning */
  className?: string;
  /** Font Awesome size variant: "xs" | "sm" | "lg" | "xl" | "2xl" */
  size?: "xs" | "sm" | "lg" | "xl" | "2xl";
  /** Spin animation for loading indicators */
  spin?: boolean;
  /** Pulse animation */
  pulse?: boolean;
  /** Accessibility label when icon is used without visible text */
  label?: string;
}

/**
 * Reusable Font Awesome Icon Component for ConverseCart AI.
 * Provides accessible, consistent Font Awesome icons across all pages.
 */
export function FAIcon({
  name,
  style = "solid",
  className = "",
  size,
  spin = false,
  pulse = false,
  label,
}: FAIconProps) {
  const isStyleObj = typeof style === "object" && style !== null;
  const iconStyle = isStyleObj ? (style as React.CSSProperties) : undefined;
  const styleType = isStyleObj ? "solid" : (style as string);

  const prefix = styleType === "brands" ? "fa-brands" : styleType === "regular" ? "fa-regular" : "fa-solid";
  const iconClass = `fa-${name}`;
  const sizeClass = size ? `fa-${size}` : "";
  const spinClass = spin ? "fa-spin" : pulse ? "fa-pulse" : "";

  const combinedClasses = `${prefix} ${iconClass} ${sizeClass} ${spinClass} ${className}`.trim();

  return (
    <i
      className={combinedClasses}
      style={iconStyle}
      aria-hidden={!label ? true : undefined}
      aria-label={label}
      role={label ? "img" : undefined}
    />
  );
}

export default FAIcon;