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

export default function Slider({
  label,
  value,
  min,
  max,
  step = 1,
  unit,
  hint,
  onChange,
}: SliderProps) {
  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium text-gray-700 dark:text-dark-text">{label}</label>
        <span className="text-sm font-semibold text-blue-600 dark:text-blue-400">
          {value} {unit}
        </span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full h-2 bg-gray-200 dark:bg-dark-border rounded-lg appearance-none cursor-pointer
          accent-blue-600"
      />
      <div className="flex justify-between text-xs text-gray-400 dark:text-dark-muted">
        <span>{min}</span>
        <span>{max}</span>
      </div>
      {hint && <p className="text-xs text-gray-400 dark:text-dark-muted">{hint}</p>}
    </div>
  );
}
