import type { ReactNode } from "react";
import Skeleton from "@mui/material/Skeleton";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";

export default function LoadingSkeleton(): ReactNode {
  return (
    <Box>
      {/* Metrics skeleton row */}
      <Grid container spacing={3} sx={{ mb: 4 }}>
        {[...Array(4)].map((_, index) => (
          <Grid key={index} size={{ xs: 12, sm: 6, md: 3 }}>
            <Skeleton variant="rounded" height={100} />
          </Grid>
        ))}
      </Grid>

      {/* Button skeleton */}
      <Skeleton variant="rounded" width={240} height={40} sx={{ mb: 3 }} />

      {/* Update cards skeleton */}
      <Grid container spacing={3}>
        {[...Array(3)].map((_, index) => (
          <Grid key={index} size={{ xs: 12, sm: 6, md: 4 }}>
            <Skeleton variant="rounded" height={180} />
          </Grid>
        ))}
      </Grid>
    </Box>
  );
}