worldcup/components/team-flag.tsx

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]' }

const placeholderSize = {
  sm:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
  md:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
  lg:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
  xl:  { width: '1.35em', height: '1em',    fontSize: '0.38em' },
}

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 (
      <span
        className={`rounded-sm inline-flex items-center justify-center flex-shrink-0 ${sizes[size]} ${className}`}
        style={{
          ...placeholderSize[size],
          background: 'rgba(42,92,53,0.35)',
          color: '#6abf7a',
          fontFamily: 'Space Grotesk, sans-serif',
          fontWeight: 700,
          letterSpacing: '0.04em',
          lineHeight: 1,
        }}
        title={name}
      >
        {abbr}
      </span>
    )
  }

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