src/components/question-creation/inputs/RangeInput.tsx

'use client';

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

export interface RangeInputProps {
  label: string;
  value?: number;
  defaultValue?: number;
  min: number;
  max: number;
  step?: number;
  onChange: (value: number) => void;
  className?: string;
  disabled?: boolean;
  showValue?: boolean;
  valueUnit?: string;
  helpText?: string;
}

export default function RangeInput({
  label,
  value,
  defaultValue = 1,
  min,
  max,
  step = 1,
  onChange,
  className = '',
  disabled = false,
  showValue = true,
  valueUnit = '',
  helpText,
}: RangeInputProps) {
  const currentValue = value ?? defaultValue;

  return (
    <div className={className}>
      <Label>
        {label}
      </Label>
      <Slider
        min={min}
        max={max}
        step={step}
        value={[currentValue]}
        onValueChange={([val]) => onChange(val)}
        disabled={disabled}
        className="mt-2"
      />
      {showValue && (
        <div className="text-center text-sm text-muted-foreground mt-1">
          {currentValue} {valueUnit} {helpText}
        </div>
      )}
      {!showValue && helpText && (
        <div className="text-xs text-muted-foreground mt-1">
          {helpText}
        </div>
      )}
    </div>
  );
}