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

const styles = {
  root: {
    display: 'flex',
    gap: 3,
    alignItems: 'baseline',
    minHeight: 64,
    py: 1,
  },
  block: { width: 120, height: 36 },
} satisfies Record<string, SxProps<Theme>>

export interface FormulaSkeletonProps {
  count?: number
}

export function FormulaSkeleton({ count = 1 }: FormulaSkeletonProps) {
  return (
    <Box sx={styles.root}>
      {Array.from({ length: count }).map((_, i) => (
        <Skeleton key={`row-${i}`} variant='rectangular' sx={styles.block} />
      ))}
    </Box>
  )
}