chore: add icons and toast

src/components/CountryFlag.tsx

@@ -0,0 +1,34 @@
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { countries } from '@/features/authentication/data/Countries';
+
+interface CountryFlagProps {
+  code: string;
+}
+
+export function CountryFlag({ code }: CountryFlagProps) {
+  const { t } = useTranslation();
+
+  const countryObj = code ? countries.find((c) => c.code === code) : null;
+
+  if (!countryObj) {
+    return null;
+  }
+
+  const displayName = t(countryObj.label);
+  const flagUrl = `https://flagcdn.com/w40/${countryObj.code.toLowerCase()}.png`;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      <img
+        loading="lazy"
+        src={flagUrl}
+        alt={displayName}
+        width="24"
+        height="16"
+        style={{ borderRadius: '2px', border: '1px solid #ccc' }}
+      />
+      <Typography variant="body2">{displayName}</Typography>
+    </Box>
+  );
+}

src/components/Toast.tsx

@@ -1,5 +1,5 @@
 import { Alert, Snackbar, type AlertColor } from '@mui/material';
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
 export interface ToastProps extends PropsWithChildren {
   color: AlertColor | undefined;