import type { ReactNode } from 'react'

/**
 * A single two-thumb range entry. Renders as an MUI `<Slider>` with editable
 * `min` / `max` text inputs below, mirroring the Range v1 widget UX.
 */
export interface RangeDataItem {
  /** Lower bound of the slider track. */
  min: number
  /** Upper bound of the slider track. */
  max: number
  /**
   * Current selected range `[low, high]`. When omitted, defaults to
   * `[min, max]` — i.e. the full track. The consumer owns this value and
   * updates it in response to `onChange`.
   */
  value?: readonly [number, number]
  /** Step granularity (default `1`). */
  step?: number
  /**
   * Tick marks. Pass `true` to enable MUI's auto-marks (one per `step`); pass
   * an array for explicit marks; omit for no marks.
   */
  marks?: boolean | readonly { value: number; label?: string }[]
  /** Disable user interaction for this row (slider + inputs). */
  disabled?: boolean
  /** Override the slider's track / thumb colour (any CSS / MUI palette path). */
  color?: string
  /** Optional caption rendered below the inputs row. */
  note?: ReactNode
}

/** Range widget data — one or more two-thumb entries rendered stacked. */
export type RangeWidgetData = readonly RangeDataItem[]

/** The shape `onChange` reports — always a `[low, high]` tuple. */
export type RangeItemValue = readonly [number, number]