import { Shuffle } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { BALANCER_COUNTRY_CODE, FLAGS } from '@/shared/lib/countries'
import { cn } from '@/shared/lib/cn'

export function CountryFlag({ code, className }: { code: string | null | undefined; className?: string }) {
  const { t } = useTranslation()
  if (!code) return null
  if (code.toUpperCase() === BALANCER_COUNTRY_CODE) {
    const label = t('countries.balancer')
    return (
      <span title={label} aria-label={label} className={cn('inline-flex shrink-0 text-sky-400', className)}>
        <Shuffle className="h-3.5 w-3.5" aria-hidden />
      </span>
    )
  }
  const Flag = FLAGS[code.toUpperCase()]
  if (!Flag) {
    return <span className={cn('font-mono text-xs text-muted-foreground', className)}>{code.toUpperCase()}</span>
  }
  return <Flag className={cn('inline-block h-3.5 w-auto shrink-0 rounded-[2px]', className)} aria-hidden />
}