import React from 'react';

export interface SliderProps {
  min: number;
  max: number;
  step?: number;
 value: number[];
  onValueChange: (value: number[]) => void;
  disabled?: boolean;
  className?: string;
}

const Slider: React.FC<SliderProps> = ({
  min,
  max,
  step = 1,
  value,
  onValueChange,
  disabled = false,
  className = '',
}) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = parseFloat(e.target.value);
    onValueChange([newValue]);
  };

  return (
    <div className={`flex items-center space-x-4 ${className}`}>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value[0]}
        onChange={handleChange}
        disabled={disabled}
        className="w-full h-2 bg-[var(--bg-secondary)] rounded-lg appearance-none cursor-pointer accent-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed"
      />
      <span className="text-sm text-[var(--text-secondary)] min-w-12">
        {(value[0] * 100).toFixed(0)}%
      </span>
    </div>
  );
};

export default Slider;
