wip

apps/website/components/profile/ProfileHeader.tsx

@@ -5,6 +5,7 @@ import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import Button from '../ui/Button';
 import { getImageService } from '@/lib/di-container';
 import DriverRatingPill from '@/components/profile/DriverRatingPill';
+import CountryFlag from '@/components/ui/CountryFlag';
 
 interface ProfileHeaderProps {
   driver: DriverDTO;
@@ -41,9 +42,7 @@ export default function ProfileHeader({
         <div>
           <div className="flex items-center gap-3 mb-2">
             <h1 className="text-3xl font-bold text-white">{driver.name}</h1>
-            <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
-              {getCountryFlag(driver.country)}
-            </span>
+            <CountryFlag countryCode={driver.country} size="lg" />
             {teamTag && (
               <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
                 {teamTag}
@@ -78,17 +77,4 @@ export default function ProfileHeader({
       )}
     </div>
   );
-}
-
-function getCountryFlag(countryCode: string): string {
-  const code = countryCode.toUpperCase();
-  
-  if (code.length === 2) {
-    const codePoints = [...code].map(char => 
-      127397 + char.charCodeAt(0)
-    );
-    return String.fromCodePoint(...codePoints);
-  }
-  
-  return '🏁';
 }