import { TEAM_ISO, getIso } from '@/lib/iso-codes'

interface Props {
  name: string
  iso2?: string | null
  size?: 'sm' | 'md' | 'lg' | 'xl'
  className?: string
}

const sizes = { sm: 'text-lg', md: 'text-2xl', lg: 'text-4xl', xl: 'text-[60px]' }

export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
  // If the name is in our registry, trust it over the DB value (which may be stale).
  // For unknown teams, fall back to the DB iso2.
  const code = name in TEAM_ISO ? TEAM_ISO[name] : (iso2 ?? getIso(name))

  if (!code) {
    const abbr = name
      .split(/\s+/)
      .map(w => w[0])
      .join('')
      .slice(0, 3)
      .toUpperCase()
    return (
      // Outer span matches flag-icons dimensions: width=1.33em, height=1em relative
      // to the Tailwind font-size class. fontSize must NOT be set here or em shrinks.
      <span
        className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
        style={{ width: '1.33em', height: '1em', background: 'rgba(42,92,53,0.35)' }}
        title={name}
      >
        <span style={{
          fontSize: '0.38em',
          color: '#6abf7a',
          fontFamily: 'Space Grotesk, sans-serif',
          fontWeight: 700,
          letterSpacing: '0.04em',
          lineHeight: 1,
        }}>
          {abbr}
        </span>
      </span>
    )
  }

  return (
    <span
      className={`fi fi-${code} rounded-sm inline-block flex-shrink-0 ${sizes[size]} ${className}`}
      title={name}
    />
  )
}