frontend/src/components/ScenarioForm.jsx

import { OPTIONS } from "../utils/formatters";

export function ScenarioForm({ formData, onChange, onSubmit, loading }) {
  return (
    <form className="scenario-form" onSubmit={onSubmit}>
      <div className="form-grid">
        <label>
          Product Category
          <select name="product_category" value={formData.product_category} onChange={onChange}>
            {OPTIONS.category.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          pH
          <input name="ph" type="number" step="0.01" value={formData.ph} onChange={onChange} />
        </label>
        <label>
          Water Activity (aw)
          <input name="aw" type="number" step="0.001" value={formData.aw} onChange={onChange} />
        </label>
        <label>
          Salt %
          <input name="salt_percent" type="number" step="0.01" value={formData.salt_percent} onChange={onChange} />
        </label>
        <label>
          Sugar %
          <input name="sugar_percent" type="number" step="0.01" value={formData.sugar_percent} onChange={onChange} />
        </label>
        <label>
          Fat %
          <input name="fat_percent" type="number" step="0.01" value={formData.fat_percent} onChange={onChange} />
        </label>
        <label>
          Preservative Enabled
          <select name="preservative_flag" value={String(formData.preservative_flag)} onChange={onChange}>
            <option value="false">No</option>
            <option value="true">Yes</option>
          </select>
        </label>
        <label>
          Preservative Type
          <select name="preservative_type" value={formData.preservative_type} onChange={onChange}>
            {OPTIONS.preservative.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          Acidulant
          <select name="acidulant_type" value={formData.acidulant_type} onChange={onChange}>
            {OPTIONS.acidulant.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          Packaging
          <select name="packaging_type" value={formData.packaging_type} onChange={onChange}>
            {OPTIONS.packaging.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          Oxygen Condition
          <select name="oxygen_condition" value={formData.oxygen_condition} onChange={onChange}>
            {OPTIONS.oxygen.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          Storage Temperature (°C)
          <input
            name="storage_temperature_c"
            type="number"
            step="0.1"
            value={formData.storage_temperature_c}
            onChange={onChange}
          />
        </label>
        <label>
          Inoculation Type
          <select name="inoculation_type" value={formData.inoculation_type} onChange={onChange}>
            {OPTIONS.inoculation.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
        <label>
          Initial Inoculum (log CFU/g)
          <input
            name="initial_inoculum_log_cfu_g"
            type="number"
            step="0.01"
            value={formData.initial_inoculum_log_cfu_g}
            onChange={onChange}
          />
        </label>
        <label>
          Target Shelf Life (days)
          <input name="target_shelf_life_days" type="number" value={formData.target_shelf_life_days} onChange={onChange} />
        </label>
        <label>
          Curve Mode
          <select name="curve_mode" value={formData.curve_mode} onChange={onChange}>
            {OPTIONS.curveMode.map(({ value, label }) => (
              <option key={value} value={value}>
                {label}
              </option>
            ))}
          </select>
        </label>
      </div>
      <button className="primary-button" type="submit" disabled={loading}>
        {loading ? "Running simulation..." : "Run Shelf-Life Simulation"}
      </button>
    </form>
  );
}