import { Box, Skeleton } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'

const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: 1,
    py: 1,
  },
  line: (width: string): SxProps<Theme> => ({ width, height: 18 }),
} as const

export interface MarkdownSkeletonProps {
  lines?: number
}

export function MarkdownSkeleton({ lines = 5 }: MarkdownSkeletonProps) {
  // Vary widths to mimic prose.
  const widths = ['100%', '95%', '90%', '85%', '70%']
  return (
    <Box sx={styles.root}>
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          key={`line-${i}`}
          variant='rectangular'
          sx={styles.line(widths[i % widths.length] ?? '85%')}
        />
      ))}
    </Box>
  )
}