import type { ReactNode } from "react";

interface SliderProps {
  label: ReactNode;
  value: number;
  min: number;
  max: number;
  step?: number;
  disabled?: boolean;
  onChange: (value: number) => void;
  /** Double-click the row to reset to this value. */
  resetTo?: number;
  /** Render the numeric readout. */
  display?: (value: number) => string;
}

export function Slider({
  label,
  value,
  min,
  max,
  step = 1,
  disabled = false,
  onChange,
  resetTo,
  display,
}: SliderProps) {
  return (
    <div className="mb-3.5 last:mb-0" onDoubleClick={() => resetTo !== undefined && !disabled && onChange(resetTo)}>
      <div className="mb-1.5 flex items-center justify-between text-xs">
        <span className="text-zinc-400">{label}</span>
        <span className="font-mono tabular-nums text-zinc-100">{display ? display(value) : value}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        disabled={disabled}
        onChange={(e) => onChange(Number(e.target.value))}
      />
    </div>
  );
}