// controllers/scoresController.js

const axios = require("axios");
const cache = require("../utils/cache"); // Import the cache

/**
 * Fetches live scores for various leagues.
 * Route: GET /scores
 */
async function scoresController(req, res) {
  try {
    // Check if live scores are cached
    const cachedScores = cache.get("liveScores");
    if (cachedScores) {
      console.log("Serving cached live scores");
      return res.status(200).json(cachedScores);
    }

    const apiUrl = "https://api.football-data.org/v4/matches";
    const response = await axios.get(apiUrl, {
      headers: {
        "X-Auth-Token": process.env.API_FOOTBALL_KEY,
      },
      params: {
        dateFrom: new Date().toISOString().split("T")[0],
        dateTo: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
          .toISOString()
          .split("T")[0],
      },
    });

    const leagueIds = {
      2014: "La Liga",
      2021: "Premier League",
      2002: "Bundesliga",
      2019: "Serie A",
      2015: "Ligue 1",
      2001: "UEFA Champions League",
      2146: "UEFA Europa League",
    };

    const filteredMatches = response.data.matches.map((match) => {
      const leagueName = leagueIds[match.competition.id] || "Other";
      return {
        id: match.id,
        utcDate: match.utcDate,
        status: match.status,
        league: leagueName,
        homeTeam: match.homeTeam,
        awayTeam: match.awayTeam,
        score: match.score,
        odds: Math.random().toFixed(2), // Mock data
        avgP: (Math.random() * 100).toFixed(2), // Mock data
        avgG: (Math.random() * 5).toFixed(2), // Mock data
        cG: Math.floor(Math.random() * 10), // Mock data
        BTS: Math.random() > 0.5 ? "Yes" : "No", // Mock data
        FTS: Math.random() > 0.5 ? "Yes" : "No", // Mock data
        "c>2,5": Math.random() > 0.5 ? "Yes" : "No", // Mock data
      };
    });

    const groupedMatches = filteredMatches.reduce((acc, match) => {
      if (!acc[match.league]) {
        acc[match.league] = [];
      }
      acc[match.league].push(match);
      return acc;
    }, {});

    // Cache the live scores with a shorter TTL (e.g., 2 minutes)
    cache.set("liveScores", groupedMatches, 120);

    console.log("Cached live scores");

    res.status(200).json(groupedMatches);
  } catch (error) {
    console.error("Error fetching live scores:", error.message);
    res.status(500).json({
      message: "Unable to retrieve live scores. Please try again later.",
    });
  }
}

module.exports = scoresController;
const express = require("express");
const router = express.Router();
const scoresController = require("../controllers/scoresController");

router.get("/", scoresController);

module.exports = router;

Basically it is fetching live score but what I want is that I want to give the league name with the score with new route to that router.get("/league", scoresController);
like this 
'use client'

import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { motion, AnimatePresence } from "framer-motion";
import { RefreshCw, ChevronDown, ChevronUp } from 'lucide-react';

const API_BASE_URL = 'http://localhost:5000';
const SCORE_REFRESH_DELAY = 60000; // 1 minute for scores
const TEAM_REFRESH_DELAY = 300000; // 5 minutes for team names
const LEAGUE_REFRESH_DELAY = 3600000; // 1 hour for league names

interface Team {
  id: number;
  name: string;
  shortName: string;
  tla: string;
  crest: string;
}

interface Score {
  winner: string | null;
  duration: string;
  fullTime: {
    home: number | null;
    away: number | null;
  };
  halfTime: {
    home: number | null;
    away: number | null;
  };
}

interface Match {
  id: number;
  utcDate: string;
  status: string;
  homeTeam: Team;
  awayTeam: Team;
  score: Score;
}

interface LiveScores {
  [key: string]: Match[];
}

const leagueColors: { [key: string]: string } = {
  'UEFA Champions League': 'bg-gradient-to-r from-blue-600 to-blue-400',
  'UEFA Europa League': 'bg-gradient-to-r from-orange-600 to-black',
  'Premier League': 'bg-gradient-to-r from-purple-600 to-blue-600',
  'La Liga': 'bg-gradient-to-r from-red-600 to-yellow-600',
  'Serie A': 'bg-gradient-to-r from-blue-600 to-green-600',
  'Bundesliga': 'bg-gradient-to-r from-red-600 to-gray-600',
  'Ligue 1': 'bg-gradient-to-r from-blue-600 to-red-600',
  'Other': 'bg-gradient-to-r from-gray-600 to-gray-400'
};

const leagueOrder = [
  'UEFA Champions League',
  'UEFA Europa League',
  'Premier League',
  'La Liga',
  'Serie A',
  'Bundesliga',
  'Ligue 1',
  'Other'
];

export default function LiveScore() {
  const [liveScores, setLiveScores] = useState<LiveScores>({});
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [lastTeamFetch, setLastTeamFetch] = useState(0);
  const [lastLeagueFetch, setLastLeagueFetch] = useState(0);
  const [expandedLeagues, setExpandedLeagues] = useState<{ [key: string]: boolean }>({});

  const fetchLiveScores = async () => {
    setIsLoading(true);
    try {
      const response = await fetch(`${API_BASE_URL}/api/scores`);
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      const data: LiveScores = await response.json();
      setLiveScores(data);
      setError(null);
    } catch (error) {
      console.error("Fetching error:", error);
      setError(error instanceof Error ? error.message : String(error));
    } finally {
      setIsLoading(false);
    }
  };

  const fetchTeamNames = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/team-names`);
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      const data: { [key: number]: Team } = await response.json();
      setLiveScores(prevScores => {
        const updatedScores = { ...prevScores };
        Object.keys(updatedScores).forEach(league => {
          updatedScores[league] = updatedScores[league].map(match => ({
            ...match,
            homeTeam: data[match.homeTeam.id] || match.homeTeam,
            awayTeam: data[match.awayTeam.id] || match.awayTeam,
          }));
        });
        return updatedScores;
      });
    } catch (error) {
      console.error("Team fetching error:", error);
    }
  };

  const fetchLeagueNames = async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/api/league-names`);
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      const data: { [key: string]: string } = await response.json();
      setLiveScores(prevScores => {
        const updatedScores: LiveScores = {};
        Object.keys(prevScores).forEach(oldLeague => {
          const newLeague = data[oldLeague] || oldLeague;
          updatedScores[newLeague] = prevScores[oldLeague];
        });
        return updatedScores;
      });
    } catch (error) {
      console.error("League fetching error:", error);
    }
  };

  useEffect(() => {
    fetchLiveScores();
    const intervalId = setInterval(() => {
      const now = Date.now();
      if (now - lastTeamFetch > TEAM_REFRESH_DELAY) {
        fetchTeamNames();
        setLastTeamFetch(now);
      }
      if (now - lastLeagueFetch > LEAGUE_REFRESH_DELAY) {
        fetchLeagueNames();
        setLastLeagueFetch(now);
      }
      fetchLiveScores();
    }, SCORE_REFRESH_DELAY);

    return () => clearInterval(intervalId);
  }, [lastTeamFetch, lastLeagueFetch]);

  const toggleLeagueExpansion = (league: string) => {
    setExpandedLeagues(prev => ({
      ...prev,
      [league]: !prev[league]
    }));
  };

  const MatchRow = ({ match }: { match: Match }) => (
    <div className="flex justify-between items-center py-2 border-b last:border-b-0">
      <div className="flex items-center space-x-2 w-5/12">
        <img src={match.homeTeam.crest} alt={match.homeTeam.name} className="w-4 h-4" />
        <span className="font-semibold text-sm">{match.homeTeam.name}</span>
      </div>
      <div className="flex flex-col items-center w-2/12">
        <div className="text-sm font-bold items-center">
          {match.score.fullTime.home ?? '-'} - {match.score.fullTime.away ?? '-'}
        </div>
        <div className="text-xs text-gray-500">
          {match.status === 'FINISHED' 
            ? 'FT' 
            : `${new Date(match.utcDate).toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' })} ${new Date(match.utcDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
        </div>
      </div>
      <div className="flex items-center justify-end space-x-2 w-5/12">
        <span className="font-semibold text-sm">{match.awayTeam.name}</span>
        <img src={match.awayTeam.crest} alt={match.awayTeam.name} className="w-4 h-4" />
      </div>
    </div>
  );

  const LeagueCard = ({ league, matches }: { league: string, matches: Match[] }) => {
    const isExpanded = expandedLeagues[league];
    const visibleMatches = isExpanded ? matches : matches.slice(0, 3);

    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.3 }}
        className="mb-4"
      >
        <Card className="overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
          <CardHeader 
            className={`${leagueColors[league]} text-white cursor-pointer hover:bg-opacity-80 transition duration-200`}
            onClick={() => toggleLeagueExpansion(league)}
            style={{ cursor: 'pointer' }}
          >
            <CardTitle className="text-xl flex items-center justify-between">
              <span>{league}</span>
              {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
            </CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            {visibleMatches.map((match) => (
              <MatchRow key={match.id} match={match} />
            ))}
            {!isExpanded && matches.length > 3 && (
              <div className="text-center mt-2 text-sm text-gray-500">
                {matches.length - 3} more matches
              </div>
            )}
          </CardContent>
        </Card>
      </motion.div>
    );
  };

  return (
    <div className="space-y-4 max-w-2xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-3xl font-bold text-gray-800">Live Scores</h2>
        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={() => window.location.reload()}
          className="p-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-300"
        >
          <RefreshCw size={20} />
        </motion.button>
      </div>
      {isLoading ? (
        Array(3).fill(0).map((_, index) => (
          <Skeleton key={index} className="h-40 w-full mb-4" />
        ))
      ) : error ? (
        <Card className="bg-red-100 text-red-700 p-4">
          <CardContent>Error: {error}</CardContent>
        </Card>
      ) : (
        <AnimatePresence>
          {leagueOrder.map(league => 
            liveScores[league] && (
              <LeagueCard key={league} league={league} matches={liveScores[league]} />
            )
          )}
          {Object.keys(liveScores).length === 0 && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="text-center p-4 text-gray-600"
            >
              No live matches at the moment.
            </motion.div>
          )}
        </AnimatePresence>
      )}
    </div>
  );
}
Because team name is not showing in this maybe any reasons like I have misconfigured the globals.css @tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}
or anything but I want to make it right can you do it to show league name 
import FootballDashboard from '@/component/FootballDashboard'

export default function Home() {
  return (
    <main className="min-h-screen p-24">
      <FootballDashboard />
    </main>
  )
}
// app/layout.tsx

import './globals.css';
import { LeagueProvider } from '../contexts/LeagueContext'; // Adjust the import path as needed
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ClientProvider from '@/components/ClientProvider';

export const metadata = {
  title: 'Football App',
  description: 'Football leagues and matches',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <LeagueProvider>
          {children}
        </LeagueProvider>
      </body>
    </html>
  );
}

'use client'

import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import LiveScore from './LiveScore'
import LeagueSelector from './LeagueSelector'
import NewsArticles from './NewsArticles'
import PlayerSearch from './PlayerSearch'
import TeamHistory from './TeamHistory'
import FantasySports from './FantasySports'
import VideoContent from './VideoContent'

// Mock API function
const fetchData = async (endpoint) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500))
  // Return mock data based on endpoint
  switch (endpoint) {
    case 'liveScore':
      return { homeTeam: "Team A", awayTeam: "Team B", homeScore: 2, awayScore: 1 }
    case 'leagues':
      return ['Premier League', 'La Liga', 'Bundesliga', 'Serie A', 'Ligue 1', 'Champions League', 'Europa League']
    case 'news':
      return [
        { id: 1, title: "Breaking: Star Player Injured", content: "Team A's star player out for 3 weeks..." },
        { id: 2, title: "Transfer Rumors: Who's Moving Where?", content: "Latest transfer gossip from around the league..." },
      ]
    case 'players':
      return [
        { id: 1, name: "Lionel Messi", team: "Inter Miami", position: "Forward" },
        { id: 2, name: "Cristiano Ronaldo", team: "Al Nassr", position: "Forward" },
      ]
    case 'teams':
      return [
        { id: 1, name: "Manchester United", league: "Premier League", history: "Founded in 1878, 20 league titles..." },
        { id: 2, name: "Real Madrid", league: "La Liga", history: "Founded in 1902, 34 La Liga titles..." },
      ]
    default:
      return []
  }
}

export default function FootballDashboard() {
  const [activeTab, setActiveTab] = useState('liveScore')

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-6xl font-bold mb-6">FootBuzz</h1>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
        <TabsList>
          <TabsTrigger value="liveScore">Live Score</TabsTrigger>
          <TabsTrigger value="leagues">Leagues</TabsTrigger>
          <TabsTrigger value="news">News</TabsTrigger>
          <TabsTrigger value="players">Players</TabsTrigger>
          <TabsTrigger value="teams">Teams</TabsTrigger>
          <TabsTrigger value="fantasy">Fantasy</TabsTrigger>
          <TabsTrigger value="videos">Highlights</TabsTrigger>
        </TabsList>

        <TabsContent value="liveScore">
          <LiveScore fetchData={fetchData} />
        </TabsContent>
        <TabsContent value="leagues">
          <LeagueSelector /> {/* Removed fetchData prop */}
        </TabsContent>
        <TabsContent value="news">
          <NewsArticles fetchData={fetchData} />
        </TabsContent>
        <TabsContent value="players">
          <PlayerSearch />
        </TabsContent>
        <TabsContent value="teams">
          <TeamHistory fetchData={fetchData} />
        </TabsContent>
        <TabsContent value="fantasy">
          <FantasySports />
        </TabsContent>
        <TabsContent value="videos">
          <VideoContent />
        </TabsContent>
      </Tabs>
    </div>
  )

}

require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const newsRoutes = require("./routes/newsRoutes");
const scoreRoutes = require("./routes/scoreRoutes");
const taskQueue = require("./taskQueue/matchUpdateQueue");
const standingsRoutes = require("./routes/standingsRoutes");
const fixturesRouter = require("./routes/fixturesRouter");
const leagueRoutes = require("./routes/leagueRoutes"); // New
const leaguesRoutes = require("./routes/leaguesRoutes"); // New
const articleRoutes = require("./routes/articleRoutes");
const playerSearchRoutes = require("./routes/playerSearchRoutes");
const videoRoutes = require("./routes/videoRoutes");
const cors = require("cors");
const path = require("path");
const app = express();

// CORS configuration
app.use(
  cors({
    origin: "http://localhost:3000", // Replace with your frontend URL
    methods: ["GET", "POST", "PUT", "DELETE"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

const PORT = process.env.PORT || 5000;

// Connect to MongoDB
mongoose
  .connect(process.env.MONGO_URL, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => console.log("Connected to MongoDB"))
  .catch((err) => console.error("MongoDB connection error:", err));

// Middleware
app.use(express.json());

// Routes
app.use("/assets", express.static(path.join(__dirname, "assets")));
app.use("/uploads", express.static(path.join(__dirname, "uploads")));
app.use("/api/players", playerSearchRoutes);
app.use("/api/news", newsRoutes);
app.use("/api/scores", scoreRoutes);
app.use("/api/articles", articleRoutes);
app.use("/api", standingsRoutes);
app.use("/api", fixturesRouter);
app.use("/api/leagues", leaguesRoutes);
app.use("/api/league", leagueRoutes);
app.use("/api/videos", videoRoutes);

// Error handling middleware
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Something broke!");
});

// Test route
app.get("/api/test", (req, res) => {
  res.json({ message: "Test route working" });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

// Start task queue worker (for fetching live scores)
taskQueue.start();

module.exports = app; // Export for testing purposes