import { Box } from '@mui/material'
import { styles } from '../style'
import type { FormulaWidgetState, RowProps } from '../types'
import { useWidgetSelector } from '../../stores/use-widget-selector'

/**
 * Iterates over the widget's data items and renders a row for each one using render props.
 */
export function Row(props: RowProps) {
  const data = useWidgetSelector(
    props.id,
    (w) => (w as FormulaWidgetState | undefined)?.data,
  )

  return data?.map((_, index) => {
    return (
      <Box sx={styles.row} key={`row-${index}`}>
        {typeof props.children === 'function'
          ? props.children({ index })
          : props.children}
      </Box>
    )
  })
}