'use client'

/** A single slider row for fine-tuning. */
export function FineTuneSlider({
  label,
  value,
  onChange,
  min,
  max,
  step,
  unit = '\u00B0',
  radioName,
  radioChecked,
  onRadioChange,
}: {
  label: string
  value: number
  onChange: (v: number) => void
  min: number
  max: number
  step: number
  unit?: string
  radioName?: string
  radioChecked?: boolean
  onRadioChange?: () => void
}) {
  return (
    <div className="flex items-center gap-2">
      {radioName !== undefined && (
        <input
          type="radio"
          name={radioName}
          checked={radioChecked}
          onChange={onRadioChange}
          className="w-3.5 h-3.5 accent-teal-500"
        />
      )}
      <span className="text-xs text-gray-500 dark:text-gray-400 w-36 shrink-0">{label}</span>
      <span className="text-xs text-gray-400 w-8 text-right">{min}{unit}</span>
      <input
        type="range"
        min={min * 100}
        max={max * 100}
        step={step * 100}
        value={Math.round(value * 100)}
        onChange={(e) => onChange(parseInt(e.target.value) / 100)}
        className="flex-1 h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
      />
      <span className="text-xs text-gray-400 w-8">+{max}{unit}</span>
      <span className="font-mono text-xs w-14 text-right tabular-nums">
        {value >= 0 ? '+' : ''}{value.toFixed(2)}{unit}
      </span>
    </div>
  )
}