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

interface ListDataSkeletonProps {
  length?: number
}

export function ListDataSkeleton({ length = 5 }: ListDataSkeletonProps) {
  return (
    <Box aria-label='List Data skeleton'>
      {new Array(length).fill(null).map((_, idx) => (
        <Grid key={`skeleton-${idx}`} container spacing={1}>
          <Grid
            container
            item
            direction='row'
            justifyContent='space-between'
            alignItems='center'
          >
            <Skeleton width={isOdd(idx) ? 72 : 48} height={20} />
            <Skeleton width={48} height={8} />
          </Grid>

          <Skeleton
            sx={{
              height: ({ spacing }) => spacing(0.5),
              marginTop: ({ spacing }) => spacing(1.25),
              marginBottom: ({ spacing }) => spacing(1.75),
              width: '100%',
            }}
          />
        </Grid>
      ))}
    </Box>
  )
}

// Aux
function isOdd(num: number) {
  return num % 2 === 1
}