import { GateMapView } from './GateMapView.jsx'

export function JourneyGateMapSection({ initiativeId, items, graphState, loading }) {
  if (!items.length) return null

  return (
    <section className="card journey-gate-map">
      <h2>Zielzustands-Graph (Ist)</h2>
      <p className="section-lead muted">
        Baum der Gate-Abhängigkeiten mit Ist-Status — keine Planungsbearbeitung (Kontrolle /
        Journey).
      </p>
      {loading ? (
        <p className="muted">Graph wird geladen …</p>
      ) : (
        <GateMapView
          initiativeId={initiativeId}
          items={items}
          graphState={graphState}
          embedded
        />
      )}
    </section>
  )
}