harden media

apps/website/components/profile/ProfileHeader.tsx

@@ -5,7 +5,7 @@ import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import Button from '../ui/Button';
 import DriverRatingPill from '@/components/profile/DriverRatingPill';
 import CountryFlag from '@/components/ui/CountryFlag';
-import { useServices } from '@/lib/services/ServiceProvider';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
 
 interface ProfileHeaderProps {
   driver: DriverViewModel;
@@ -26,19 +26,21 @@ export default function ProfileHeader({
   teamName,
   teamTag,
 }: ProfileHeaderProps) {
-  const { mediaService } = useServices();
-
   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={mediaService.getDriverAvatar(driver.id)}
-            alt={driver.name}
-            width={80}
-            height={80}
-            className="w-full h-full object-cover"
-          />
+          {driver.avatarUrl ? (
+            <Image
+              src={driver.avatarUrl}
+              alt={driver.name}
+              width={80}
+              height={80}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <PlaceholderImage size={80} />
+          )}
         </div>
         
         <div>