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

export function TimeseriesSkeleton() {
  return (
    <Box sx={styles.skeleton.graph.container}>
      {/* Timeseries bar */}
      <Box sx={styles.skeleton.graph.grid}>
        <Skeleton
          sx={styles.skeleton.histogram.item}
          variant='rectangular'
          height='20%'
        />
        <Skeleton
          sx={styles.skeleton.histogram.item}
          variant='rectangular'
          height='40%'
        />
        <Skeleton
          sx={styles.skeleton.histogram.item}
          variant='rectangular'
          height='60%'
        />
        <Skeleton
          sx={styles.skeleton.histogram.item}
          variant='rectangular'
          height='20%'
        />
        <Skeleton
          sx={styles.skeleton.histogram.item}
          variant='rectangular'
          height='80%'
        />
      </Box>
      {/* Legend */}
      <Box sx={styles.skeleton.legend}>
        {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>
  )
}