harden media

apps/website/components/profile/DriverSummaryPill.tsx

@@ -5,13 +5,13 @@ import Image from 'next/image';
 import Link from 'next/link';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import DriverRating from '@/components/profile/DriverRatingPill';
-import { useServices } from '@/lib/services/ServiceProvider';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
 
 export interface DriverSummaryPillProps {
   driver: DriverViewModel;
   rating: number | null;
   rank: number | null;
-  avatarSrc?: string;
+  avatarSrc?: string | null;
   onClick?: () => void;
   href?: string;
 }
@@ -19,21 +19,22 @@ export interface DriverSummaryPillProps {
 export default function DriverSummaryPill(props: DriverSummaryPillProps) {
   const { driver, rating, rank, avatarSrc, onClick, href } = props;
 
-  const { mediaService } = useServices();
-
-  const resolvedAvatar =
-    avatarSrc ?? mediaService.getDriverAvatar(driver.id);
+  const resolvedAvatar = avatarSrc;
 
   const content = (
     <>
       <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
-        <Image
-          src={resolvedAvatar}
-          alt={driver.name}
-          width={32}
-          height={32}
-          className="w-full h-full object-cover"
-        />
+        {resolvedAvatar ? (
+          <Image
+            src={resolvedAvatar}
+            alt={driver.name}
+            width={32}
+            height={32}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <PlaceholderImage size={32} />
+        )}
       </div>
 
       <div className="flex flex-col leading-tight text-left">