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

interface FilterRangeSliderProps {
  label: string;
  value: [number, number];
  onChange: (value: [number, number]) => void;
  min: number;
  max: number;
  step?: number;
  unit?: string;
  formatValue?: (value: number) => string;
}

export function FilterRangeSlider({
  label,
  value,
  onChange,
  min,
  max,
  step = 1,
  unit = '',
  formatValue
}: FilterRangeSliderProps) {
  const format = formatValue || ((v: number) => `${v}${unit}`);

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Label>{label}</Label>
        <Badge variant="outline">
          {format(value[0])} - {format(value[1])}
        </Badge>
      </div>
      <div className="px-2">
        <Slider
          value={value}
          onValueChange={onChange}
          min={min}
          max={max}
          step={step}
          className="w-full"
        />
        <div className="flex justify-between text-xs text-muted-foreground mt-1">
          <span>{format(min)}</span>
          <span>{format(max)}</span>
        </div>
      </div>
    </div>
  );
}
