import React from 'react'

export default function ParamSlider({ label, value, min, max, step = 1, onChange, leftLabel, rightLabel, disabled }) {
  const displayValue = step < 1 ? value.toFixed(2) : Math.round(value)

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between">
        <label className="text-xs text-gray-400 font-medium">{label}</label>
        <span className="text-xs font-mono text-accent-400">{displayValue}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={e => onChange(parseFloat(e.target.value))}
        disabled={disabled}
        className="w-full"
      />
      {(leftLabel || rightLabel) && (
        <div className="flex justify-between">
          <span className="text-[10px] text-gray-500">{leftLabel}</span>
          <span className="text-[10px] text-gray-500">{rightLabel}</span>
        </div>
      )}
    </div>
  )
}