import { Box, Skeleton } from '@mui/material'

interface LoadingPageProps {
  rows?: number
}

export function LoadingPage({ rows = 5 }: LoadingPageProps) {
  return (
    <Box className="flex flex-col gap-4 p-6 w-full">
      <Skeleton variant="rectangular" height={48} className="rounded" />
      <Box className="flex gap-4">
        {[1, 2, 3, 4].map(i => (
          <Skeleton key={i} variant="rectangular" height={80} className="flex-1 rounded" />
        ))}
      </Box>
      {Array.from({ length: rows }).map((_, i) => (
        <Skeleton key={i} variant="rectangular" height={64} className="rounded" />
      ))}
    </Box>
  )
}
