import { Slider } from '@/components/ui/slider';

interface SliderRowProps {
  label: string;
  display: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  onChange: (v: number) => void;
  disabled?: boolean;
}

/**
 * Shared label+display header + Slider.
 * For the keyframe editor's slider+number-input variant, use the local SliderRow in KeyframeProperties.tsx.
 */
export function SliderRow({ label, display, value, min, max, step = 1, onChange, disabled }: SliderRowProps) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between">
        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
          {label}
        </span>
        <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{display}</span>
      </div>
      <Slider
        min={min}
        max={max}
        step={step}
        value={[value]}
        onValueChange={([v]) => onChange(v)}
        disabled={disabled}
      />
    </div>
  );
}