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

const styles = {
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: 3,
    py: 1,
  },
  item: {
    display: 'flex',
    flexDirection: 'column',
    gap: 1.5,
  },
  track: { height: 32 },
  inputsRow: {
    display: 'flex',
    gap: 2,
  },
  input: { flex: 1, height: 40 },
} satisfies Record<string, SxProps<Theme>>

export interface RangeSkeletonProps {
  count?: number
}

/**
 * Loading placeholder for the Range widget. Renders `count` rows, each
 * matching the slider-then-inputs layout of {@link RangeUI} so the layout
 * doesn't jump when data resolves.
 */
export function RangeSkeleton({ count = 1 }: RangeSkeletonProps) {
  return (
    <Box sx={styles.root}>
      {Array.from({ length: count }).map((_, i) => (
        <Box key={`item-${i}`} sx={styles.item}>
          <Skeleton variant='rectangular' sx={styles.track} />
          <Box sx={styles.inputsRow}>
            <Skeleton variant='rectangular' sx={styles.input} />
            <Skeleton variant='rectangular' sx={styles.input} />
          </Box>
        </Box>
      ))}
    </Box>
  )
}