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

export function BarSkeleton() {
  return (
    <Box sx={styles.skeleton.graph.container}>
      <Box sx={styles.skeleton.graph.grid}>
        <Skeleton
          sx={styles.skeleton.item}
          variant='rectangular'
          height='20%'
        />
        <Skeleton
          sx={styles.skeleton.item}
          variant='rectangular'
          height='40%'
        />
        <Skeleton
          sx={styles.skeleton.item}
          variant='rectangular'
          height='60%'
        />
        <Skeleton
          sx={styles.skeleton.item}
          variant='rectangular'
          height='20%'
        />
        <Skeleton
          sx={styles.skeleton.item}
          variant='rectangular'
          height='80%'
        />
      </Box>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: ({ spacing }) => spacing(2),
          height: ({ spacing }) => spacing(5),
        }}
      >
        {Array(2)
          .fill(0)
          .map((_, i) => (
            <Box
              key={`skeleton-${i}`}
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: ({ spacing }) => spacing(1.5),
              }}
            >
              <Skeleton variant='circular' width={8} height={8} />
              <Skeleton width={48} height={8} />
            </Box>
          ))}
      </Box>
    </Box>
  )
}