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

interface PanelLoadingStateProps {
  rows?: number
  height?: number
}

export function PanelLoadingState({ rows = 4, height = 16 }: PanelLoadingStateProps) {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, p: 1 }}>
      {Array.from({ length: rows }).map((_, i) => (
        <Skeleton
          key={i}
          variant="rectangular"
          width={i % 3 === 2 ? '60%' : i % 3 === 1 ? '85%' : '100%'}
          height={height}
          sx={{ borderRadius: 0.5 }}
        />
      ))}
    </Box>
  )
}
