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

const widthPatterns = [85, 70, 55, 75, 60]

export function CategorySkeleton() {
  return (
    <Box sx={styles.list} aria-label='Category skeleton'>
      {Array.from({ length: 5 }).map((_, index) => (
        <Box key={index} sx={styles.row}>
          <Box sx={styles.rowHeader}>
            <Skeleton width={80} height={16} />
            <Skeleton width={40} height={16} />
          </Box>
          <Skeleton
            variant='rectangular'
            height={4}
            sx={{ borderRadius: 2, width: `${widthPatterns[index]}%` }}
          />
        </Box>
      ))}
    </Box>
  )
}