wip

apps/website/components/teams/TeamCard.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 import Card from '../ui/Card';
-import { getTeamLogoUrl } from '@/lib/racingLegacyFacade';
+import { getImageService } from '@/lib/di-container';
 
 interface TeamCardProps {
   id: string;
@@ -10,6 +10,9 @@ interface TeamCardProps {
   logo?: string;
   memberCount: number;
   leagues: string[];
+  rating?: number | null;
+  totalWins?: number;
+  totalRaces?: number;
   performanceLevel?: 'beginner' | 'intermediate' | 'advanced' | 'pro';
   onClick?: () => void;
 }
@@ -20,6 +23,9 @@ export default function TeamCard({
   logo,
   memberCount,
   leagues,
+  rating,
+  totalWins,
+  totalRaces,
   performanceLevel,
   onClick,
 }: TeamCardProps) {
@@ -40,7 +46,7 @@ export default function TeamCard({
           <div className="flex items-start gap-4">
             <div className="w-16 h-16 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
               <Image
-                src={logo || getTeamLogoUrl(id)}
+                src={logo || getImageService().getTeamLogo(id)}
                 alt={name}
                 width={64}
                 height={64}
@@ -54,6 +60,11 @@ export default function TeamCard({
               <p className="text-sm text-gray-400">
                 {memberCount} {memberCount === 1 ? 'member' : 'members'}
               </p>
+              {typeof rating === 'number' && (
+                <p className="text-xs text-primary-blue mt-1">
+                  Team rating: <span className="font-semibold">{Math.round(rating)}</span>
+                </p>
+              )}
             </div>
           </div>
 
@@ -69,6 +80,27 @@ export default function TeamCard({
             </div>
           )}
 
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-sm text-gray-400">Rating</div>
+              <div className="text-lg font-semibold text-primary-blue">
+                {typeof rating === 'number' ? Math.round(rating) : '—'}
+              </div>
+            </div>
+            <div>
+              <div className="text-sm text-gray-400">Wins</div>
+              <div className="text-lg font-semibold text-green-400">
+                {totalWins ?? 0}
+              </div>
+            </div>
+            <div>
+              <div className="text-sm text-gray-400">Races</div>
+              <div className="text-lg font-semibold text-white">
+                {totalRaces ?? 0}
+              </div>
+            </div>
+          </div>
+
           <div className="space-y-2">
             <p className="text-sm font-medium text-gray-400">Active in:</p>
             <div className="flex flex-wrap gap-2">