import type { RangeUIProps } from './types'
import { Row } from '../formula/components/row'
import { RangeItem } from './components/range-item'

/**
 * Renders a range widget with one or more interactive dual-slider controls for selecting value ranges.
 */
export function RangeUI(props: RangeUIProps) {
  return (
    <Row id={props.id}>
      {({ index }) => <RangeItem id={props.id} index={index} />}
    </Row>
  )
}