"use client";

import { GlobalAgentRoster } from "@/components/mission-control/GlobalAgentRoster";
import { MissionControlPanel } from "@/components/mission-control/MissionControlPanel";

const DEFAULT_PANEL_SLOTS = ["panel-1", "panel-2", "panel-3", "panel-4"] as const;

export function MissionControlLayout(): React.JSX.Element {
  return (
    <section className="h-full min-h-0 overflow-hidden" aria-label="Mission Control">
      <div className="grid h-full min-h-0 gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
        <aside className="h-full min-h-0">
          <GlobalAgentRoster />
        </aside>
        <main className="h-full min-h-0 overflow-hidden">
          <MissionControlPanel panels={DEFAULT_PANEL_SLOTS} />
        </main>
      </div>
    </section>
  );
}