added rankings but ugly and tired

source/hooks/useMatches.js

@@ -0,0 +1,58 @@
+// hooks/useMatches.js
+
+import { useState, useEffect } from 'react';
+import { formatDateTimeUTC } from '../utils/dateUtils.js';
+import { FOOTBALL_API_TOKEN } from '../config.js';
+
+async function fetchScheduledMatches(teamId) {
+  const url = `https://api.football-data.org/v4/teams/${teamId}/matches?status=SCHEDULED`;
+  try {
+    const response = await fetch(url, {
+      headers: { "X-Auth-Token": FOOTBALL_API_TOKEN }
+    });
+    const data = await response.json();
+    if (!data.matches) return [];
+    return data.matches.map(match => {
+      let opponent, homeAway;
+      if (match.homeTeam.id === teamId) {
+        opponent = match.awayTeam.name;
+        homeAway = 'Home';
+      } else if (match.awayTeam.id === teamId) {
+        opponent = match.homeTeam.name;
+        homeAway = 'Away';
+      } else {
+        return null;
+      }
+      const { date, time } = formatDateTimeUTC(match.utcDate);
+      return { date, time, opponent, homeAway };
+    }).filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+export function useMatches(teamIds) {
+  // teamIds is an object like { inter: 6684, paris: 1045 }
+  const [matchesInter, setMatchesInter] = useState(null);
+  const [matchesParis, setMatchesParis] = useState(null);
+
+  async function updateMatchesData() {
+    try {
+      const [interMatches, parisMatches] = await Promise.all([
+        fetchScheduledMatches(teamIds.inter),
+        fetchScheduledMatches(teamIds.paris)
+      ]);
+      setMatchesInter(interMatches);
+      setMatchesParis(parisMatches);
+    } catch (_) { }
+  }
+
+    useEffect(() => {
+    updateMatchesData();
+    const interval = setInterval(updateMatchesData, 60000);
+    return () => clearInterval(interval);
+    }, [teamIds]);
+
+
+  return { matchesInter, matchesParis };
+}