import { cn } from '../lib/utils';

interface SliderProps {
  label: string;
  value: number;
  onChange: (value: number) => void;
  min: number;
  max: number;
  step?: number;
  info?: string;
}

export function Slider({ label, value, onChange, min, max, step = 1, info }: SliderProps) {
  return (
    <div className="space-y-1.5">
      <div className="flex items-center justify-between">
        <label className="text-xs font-semibold text-text-primary">{label}</label>
        <input
          type="number"
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          min={min}
          max={max}
          step={step}
          className="w-14 px-2 py-1 text-xs text-center bg-white border border-dark-border rounded-lg text-text-primary focus:border-nvidia-green focus:outline-none focus:ring-2 focus:ring-nvidia-green/20"
        />
      </div>
      {info && <p className="text-[10px] text-text-muted">{info}</p>}
      <div className="flex items-center gap-2">
        <span className="text-[10px] text-text-muted w-4">{min}</span>
        <input
          type="range"
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          min={min}
          max={max}
          step={step}
          className={cn(
            'flex-1 h-2 rounded-lg appearance-none cursor-pointer',
            'bg-dark-input',
            '[&::-webkit-slider-thumb]:appearance-none',
            '[&::-webkit-slider-thumb]:w-4',
            '[&::-webkit-slider-thumb]:h-4',
            '[&::-webkit-slider-thumb]:rounded-full',
            '[&::-webkit-slider-thumb]:bg-nvidia-green',
            '[&::-webkit-slider-thumb]:cursor-pointer',
            '[&::-webkit-slider-thumb]:transition-transform',
            '[&::-webkit-slider-thumb]:hover:scale-110',
            '[&::-webkit-slider-thumb]:shadow-md'
          )}
        />
        <span className="text-[10px] text-text-muted w-4 text-right">{max}</span>
      </div>
    </div>
  );
}