client/src/components/LeaderboardSection.jsx

import React, { useState } from "react";
import { Typography, Grid, Box, Button } from "@mui/material";
import { alpha } from "@mui/material/styles";
import LeaderboardCard from "./LeaderboardCard";

const ITEMS_PER_PAGE = 3;

const LeaderboardSection = ({ title, leaderboards }) => {
  const [showAll, setShowAll] = useState(false);

  if (!leaderboards || leaderboards.length === 0) return null;

  const displayedLeaderboards = showAll
    ? leaderboards
    : leaderboards.slice(0, ITEMS_PER_PAGE);

  return (
    <Box sx={{ mb: 6 }}>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          mb: 4,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
          <Typography
            variant="h4"
            sx={{
              color: "text.primary",
              fontWeight: 600,
              fontSize: { xs: "1.5rem", md: "2rem" },
            }}
          >
            {title}
          </Typography>
          <Box
            sx={(theme) => ({
              width: "4px",
              height: "4px",
              borderRadius: "100%",
              backgroundColor: alpha(
                theme.palette.text.primary,
                theme.palette.mode === "dark" ? 0.2 : 0.15
              ),
            })}
          />
          <Typography
            variant="h4"
            sx={{
              color: "text.secondary",
              fontWeight: 400,
              fontSize: { xs: "1.25rem", md: "1.5rem" },
            }}
          >
            {leaderboards.length}
          </Typography>
        </Box>
        {leaderboards.length > ITEMS_PER_PAGE && (
          <Button
            onClick={() => setShowAll(!showAll)}
            sx={{
              color: "text.secondary",
              fontSize: "0.875rem",
              textTransform: "none",
              "&:hover": {
                backgroundColor: (theme) =>
                  alpha(
                    theme.palette.text.primary,
                    theme.palette.mode === "dark" ? 0.1 : 0.06
                  ),
              },
            }}
          >
            {showAll ? "Show less" : "Show more"}
          </Button>
        )}
      </Box>
      <Grid container spacing={3}>
        {displayedLeaderboards.map((leaderboard, index) => (
          <Grid item xs={12} sm={6} md={4} key={index}>
            <LeaderboardCard leaderboard={leaderboard} />
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default LeaderboardSection;