di usage in website

apps/website/components/teams/TeamStandings.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import Card from '@/components/ui/Card';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useTeamStandings } from '@/hooks/team';
 
 interface TeamStandingsProps {
   teamId: string;
@@ -10,32 +9,7 @@ interface TeamStandingsProps {
 }
 
 export default function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
-  const { leagueService } = useServices();
-  const [standings, setStandings] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        // For demo purposes, create mock standings
-        const mockStandings = leagues.map(leagueId => ({
-          leagueId,
-          leagueName: `League ${leagueId}`,
-          position: Math.floor(Math.random() * 10) + 1,
-          points: Math.floor(Math.random() * 100),
-          wins: Math.floor(Math.random() * 5),
-          racesCompleted: Math.floor(Math.random() * 10),
-        }));
-        setStandings(mockStandings);
-      } catch (error) {
-        console.error('Failed to load standings:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    void load();
-  }, [teamId, leagues]);
+  const { data: standings = [], isLoading: loading } = useTeamStandings(teamId, leagues);
 
   if (loading) {
     return (
@@ -50,7 +24,7 @@ export default function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
       <h3 className="text-xl font-semibold text-white mb-6">League Standings</h3>
       
       <div className="space-y-4">
-        {standings.map((standing) => (
+        {standings.map((standing: any) => (
           <div
             key={standing.leagueId}
             className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"