spelljammer-ships/web/src/components/ui/NumericStepper.tsx

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

export default function NumericStepper({ label, value, onChange, min = 0, max, step = 1 }: Props) {
  const decrement = () => {
    const next = value - step;
    onChange(min !== undefined ? Math.max(min, next) : next);
  };

  const increment = () => {
    const next = value + step;
    onChange(max !== undefined ? Math.min(max, next) : next);
  };

  return (
    <div className="stepper">
      <span className="stepper-label">{label}</span>
      <div className="stepper-controls">
        <button
          type="button"
          className="stepper-btn"
          onClick={decrement}
          disabled={min !== undefined && value <= min}
        >
          -
        </button>
        <span className="stepper-value">{value}</span>
        <button
          type="button"
          className="stepper-btn"
          onClick={increment}
          disabled={max !== undefined && value >= max}
        >
          +
        </button>
      </div>
    </div>
  );
}