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

export function HistogramSkeleton() {
  return (
    <Box sx={styles.skeleton.graph.container}>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'flex-end',
          justifyContent: 'space-between',
          gap: ({ spacing }) => spacing(0.5),
          height: ({ spacing }) => spacing(30),
          width: '100%',
        }}
      >
        {Array(8)
          .fill(0)
          .map((_, i) => {
            // Create varying heights for histogram bars
            const heights = [60, 80, 95, 85, 70, 55, 40, 30]
            const height = `${heights[i]}%`
            return (
              <Skeleton
                key={`skeleton-bar-${i}`}
                variant='rectangular'
                sx={{
                  flex: 1,
                  height,
                }}
              />
            )
          })}
      </Box>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: '100%',
          mt: ({ spacing }) => spacing(1),
        }}
      >
        {Array(4)
          .fill(0)
          .map((_, i) => (
            <Skeleton key={`skeleton-label-${i}`} width={32} height={8} />
          ))}
      </Box>
    </Box>
  )
}