client/src/components/LeaderboardSection.jsx

import React, { useState } from "react";
import { Typography, Grid, Box, Button, Collapse } from "@mui/material";
import { alpha } from "@mui/material/styles";
import LeaderboardCard from "./LeaderboardCard";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";

const ITEMS_PER_PAGE = 3;

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

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

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

  const toggleExpanded = () => {
    setShowAll(!showAll);
    setExpanded(!expanded);
  };

  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={toggleExpanded}
            size="small"
            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
                  ),
              },
            }}
            endIcon={
              <ExpandMoreIcon
                sx={{
                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 300ms",
                }}
              />
            }
          >
            {expanded ? "Show less" : "Show more"}
          </Button>
        )}
      </Box>
      <Grid container spacing={3}>
        {leaderboards.slice(0, ITEMS_PER_PAGE).map((leaderboard, index) => (
          <Grid item xs={12} sm={6} md={4} key={index}>
            <LeaderboardCard leaderboard={leaderboard} />
          </Grid>
        ))}
      </Grid>
      <Collapse in={showAll} timeout={300}>
        <Grid container spacing={3} sx={{ mt: 0 }}>
          {leaderboards.slice(ITEMS_PER_PAGE).map((leaderboard, index) => (
            <Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
              <LeaderboardCard leaderboard={leaderboard} />
            </Grid>
          ))}
        </Grid>
      </Collapse>
    </Box>
  );
};

export default LeaderboardSection;