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

const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
    py: 1,
  },
  row: {
    display: 'flex',
    alignItems: 'center',
    gap: 1.5,
  },
  block: { width: 200, height: 32 },
} satisfies Record<string, SxProps<Theme>>

export interface SpreadSkeletonProps {
  count?: number
}

/**
 * Loading placeholder for the Spread widget. Renders `count` rows, each
 * sized for the `min — max` pair so the layout doesn't jump once data
 * resolves. Mirrors the row-per-item structure of {@link SpreadUI}.
 */
export function SpreadSkeleton({ count = 1 }: SpreadSkeletonProps) {
  return (
    <Box sx={styles.root}>
      {Array.from({ length: count }).map((_, i) => (
        <Box key={`row-${i}`} sx={styles.row}>
          <Skeleton variant='rectangular' sx={styles.block} />
        </Box>
      ))}
    </Box>
  )
}