type Props = {
  values: number[]
  min: number
  max: number
  step: number
  unit?: string
  onChange: (index: number, value: number) => void
}

/** One labelled slider per harmonic, with a numeric box for exact entry. */
export function HarmonicSliders({ values, min, max, step, unit, onChange }: Props) {
  return (
    <div className="slider-grid">
      {values.map((v, k) => (
        <div className="slider-row" key={k}>
          <span className="slider-label">{k + 1}</span>
          <input type="range" min={min} max={max} step={step} value={v} onChange={(e) => onChange(k, Number(e.target.value))} />
          <input
            type="number"
            className="slider-value"
            min={min}
            max={max}
            step={step}
            value={v}
            onChange={(e) => {
              const x = Number(e.target.value)
              if (Number.isFinite(x)) onChange(k, Math.min(max, Math.max(min, x)))
            }}
          />
          {unit && <span className="slider-unit">{unit}</span>}
        </div>
      ))}
    </div>
  )
}