// ScenarioToggle — numbered editorial toggle: 01 / Title · 02 / Title · 03 / Title
function ScenarioToggle({ scenarios, activeId, onChange, disabled }) {
  return (
    <div className="scenario-toggle" role="tablist" aria-label="Select scenario">
      {scenarios.map((s) => {
        const active = s.id === activeId;
        return (
          <button
            key={s.id}
            role="tab"
            aria-selected={active}
            disabled={disabled}
            onClick={() => onChange(s.id)}
            className={"scenario-toggle__item" + (active ? " is-active" : "")}
          >
            <span className="scenario-toggle__num">{s.number}</span>
            <span className="scenario-toggle__slash">/</span>
            <span className="scenario-toggle__title">{s.title}</span>
          </button>
        );
      })}
    </div>
  );
}

window.ScenarioToggle = ScenarioToggle;