components/InputField.js

export default function InputField({ label, value, onChange, type = "number", suffix, min = 0, step = 1 }) {
  return (
    <div className="input-group">
      <label>{label}</label>
      <div className="relative rounded-md shadow-sm">
        <input
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="block w-full rounded-md border-slate-300 pl-3 pr-10 py-2 text-sm border focus:border-brand-500 focus:ring-brand-500"
          min={min}
          step={step}
        />
        {suffix && (
          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <span className="text-slate-500 sm:text-sm">{suffix}</span>
          </div>
        )}
      </div>
    </div>
  );
}