'use client';
/**
 * CountStepper — 数量调节器（+/- 步进）
 */
interface CountStepperProps {
  label: string;
  value: number;
  onInc: () => void;
  onDec: () => void;
}

export function CountStepper({ label, value, onInc, onDec }: CountStepperProps) {
  return (
    <div>
      <p className="text-sm font-medium text-text-primary mb-2">{label}</p>
      <div className="flex items-center gap-2">
        <button type="button" onClick={onDec} aria-label={`减少${label}`}
          className="w-7 h-7 rounded-full border border-border-default text-text-secondary hover:bg-surface-tertiary flex items-center justify-center">
          −
        </button>
        <span className="w-8 text-center text-sm font-medium">{value}</span>
        <button type="button" onClick={onInc} aria-label={`增加${label}`}
          className="w-7 h-7 rounded-full border border-border-default text-text-secondary hover:bg-surface-tertiary flex items-center justify-center">
          +
        </button>
      </div>
    </div>
  );
}
