import { Box, Typography } from '@mui/material';

export const countryCodeMap: { [key: string]: string } = {
  ایران: 'ir',
  قطر: 'qa',
  آلمان: 'de',
  آمریکا: 'us',
  فرانسه: 'fr',
  ایتالیا: 'it',
  اسپانیا: 'es',
  انگلیس: 'gb',
  کانادا: 'ca',
  استرالیا: 'au',
  چین: 'cn',
  ژاپن: 'jp',
  هند: 'in',
  روسیه: 'ru',
  برزیل: 'br',
  آرژانتین: 'ar',
  ترکیه: 'tr',
  سوئیس: 'ch',
  سوئد: 'se',
  نروژ: 'no',
  عربستان: 'sa',
  امارات: 'ae',
  عراق: 'iq',
  پاکستان: 'pk',
};

export function CountryFlag({ country }: { country: string }) {
  const countryCode = countryCodeMap[country] || 'un';
  const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
      <img
        src={flagUrl}
        alt={country}
        width="24"
        height="16"
        style={{ borderRadius: '2px', border: '1px solid #ccc' }}
      />
      <Typography variant="body2">{country}</Typography>
    </Box>
  );
}