import { getTokenIconUrl } from '../../config/tokenIcons';

interface TokenIconProps {
  symbol: string
  logoURI?: string
  size?: number
  className?: string
}

export default function TokenIcon({ symbol, logoURI, size = 24, className = '' }: TokenIconProps) {
  const src = logoURI || getTokenIconUrl(symbol);

  if (src) {
    const fallbackChar = symbol ? symbol.slice(0, 2).toUpperCase() : '?';
    return (
      <span className={`relative inline-flex flex-shrink-0 ${className}`} style={{ width: size, height: size }}>
        <img
          src={src}
          alt={symbol}
          width={size}
          height={size}
          className="rounded-full absolute inset-0 w-full h-full object-cover"
          onError={(e) => {
            e.currentTarget.style.display = 'none';
            const fb = e.currentTarget.nextElementSibling as HTMLElement;
            if (fb) fb.style.display = 'flex';
          }}
        />
        <span
          className="rounded-full bg-[#252830] flex items-center justify-center text-xs font-medium text-[#A0A0A0] hidden"
          style={{ width: size, height: size }}
          aria-hidden
        >
          {fallbackChar}
        </span>
      </span>
    );
  }

  return (
    <span
      className={`rounded-full bg-[#252830] flex items-center justify-center text-xs font-medium text-[#A0A0A0] flex-shrink-0 ${className}`}
      style={{ width: size, height: size }}
      title={symbol}
    >
      {symbol ? symbol.slice(0, 2).toUpperCase() : '?'}
    </span>
  );
}
