wip

apps/website/components/profile/ProfileHeader.tsx

@@ -3,21 +3,34 @@
 import Image from 'next/image';
 import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import Button from '../ui/Button';
-import { getDriverTeam, getDriverAvatarUrl } from '@/lib/racingLegacyFacade';
+import { getImageService } from '@/lib/di-container';
+import DriverRatingPill from '@/components/profile/DriverRatingPill';
 
 interface ProfileHeaderProps {
   driver: DriverDTO;
+  rating?: number | null;
+  rank?: number | null;
   isOwnProfile?: boolean;
   onEditClick?: () => void;
+  teamName?: string | null;
+  teamTag?: string | null;
 }
 
-export default function ProfileHeader({ driver, isOwnProfile = false, onEditClick }: ProfileHeaderProps) {
+export default function ProfileHeader({
+  driver,
+  rating,
+  rank,
+  isOwnProfile = false,
+  onEditClick,
+  teamName,
+  teamTag,
+}: ProfileHeaderProps) {
   return (
     <div className="flex items-start justify-between">
       <div className="flex items-start gap-4">
         <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 overflow-hidden flex items-center justify-center">
           <Image
-            src={getDriverAvatarUrl(driver.id)}
+            src={getImageService().getDriverAvatar(driver.id)}
             alt={driver.name}
             width={80}
             height={80}
@@ -31,36 +44,30 @@ export default function ProfileHeader({ driver, isOwnProfile = false, onEditClic
             <span className="text-3xl" aria-label={`Country: ${driver.country}`}>
               {getCountryFlag(driver.country)}
             </span>
-            {(() => {
-              const teamData = getDriverTeam(driver.id);
-              if (teamData) {
-                return (
-                  <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
-                    {teamData.team.tag}
-                  </span>
-                );
-              }
-              return null;
-            })()}
+            {teamTag && (
+              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
+                {teamTag}
+              </span>
+            )}
           </div>
           
           <div className="flex items-center gap-4 text-sm text-gray-400">
             <span>iRacing ID: {driver.iracingId}</span>
-            <span>•</span>
-            <span>Rating: 1450</span>
-            {(() => {
-              const teamData = getDriverTeam(driver.id);
-              if (teamData) {
-                return (
-                  <>
-                    <span>•</span>
-                    <span className="text-primary-blue">{teamData.team.name}</span>
-                  </>
-                );
-              }
-              return null;
-            })()}
+            {teamName && (
+              <>
+                <span>•</span>
+                <span className="text-primary-blue">
+                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
+                </span>
+              </>
+            )}
           </div>
+
+          {(typeof rating === 'number' || typeof rank === 'number') && (
+            <div className="mt-2">
+              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
+            </div>
+          )}
         </div>
       </div>