"use client";

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

interface MissionControlPanelProps {
  panels: readonly string[];
  panelSessionIds?: readonly (string | undefined)[];
}

export function MissionControlPanel({
  panels,
  panelSessionIds,
}: MissionControlPanelProps): React.JSX.Element {
  return (
    <div className="grid h-full min-h-0 auto-rows-fr grid-cols-1 gap-4 overflow-y-auto pr-1 md:grid-cols-2">
      {panels.map((panelId, index) => {
        const sessionId = panelSessionIds?.[index];

        if (sessionId === undefined) {
          return <OrchestratorPanel key={panelId} />;
        }

        return <OrchestratorPanel key={panelId} sessionId={sessionId} />;
      })}
    </div>
  );
}