fix: translation and styles

src/components/CountryFlag.tsx

@@ -0,0 +1,46 @@
+import { Box, Typography } from '@mui/material';
+
+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>
+  );
+}