frontend/src/components/NumberInput.tsx

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

export function NumberInput({
  label,
  value,
  onChange,
  min,
  max,
  step = 0.01,
  info,
  unit,
  compact = false,
}: NumberInputProps) {
  return (
    <div className="space-y-1.5">
      <label className={`font-semibold text-text-primary ${compact ? 'text-xs' : 'text-sm'}`}>{label}</label>
      {info && <p className={`text-text-muted ${compact ? 'text-[10px]' : 'text-xs'}`}>{info}</p>}
      <div className="relative">
        <input
          type="number"
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          min={min}
          max={max}
          step={step}
          className={`w-full 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 transition-all ${
            compact ? 'px-3 py-2 text-sm' : 'px-4 py-3 text-base'
          }`}
        />
        {unit && (
          <span className={`absolute right-3 top-1/2 -translate-y-1/2 text-text-muted ${
            compact ? 'text-xs' : 'text-sm'
          }`}>
            {unit}
          </span>
        )}
      </div>
    </div>
  );
}