MCP Router

import { ReactNode } from 'react';
import { Sidebar, NavItem } from './Sidebar';
import { Header } from './Header';

export interface MainLayoutProps {
  children: ReactNode;
  activeNav: NavItem;
  pageTitle: string;
  onNavigate: (item: NavItem) => void;
}

export function MainLayout({
  children,
  activeNav,
  pageTitle,
  onNavigate,
}: MainLayoutProps) {
  return (
    <div className="flex h-screen bg-background" data-testid="main-layout">
      {/* Sidebar */}
      <Sidebar activeItem={activeNav} onNavigate={onNavigate} />

      {/* Main Content */}
      <div className="flex flex-1 flex-col overflow-hidden">
        {/* Header */}
        <Header title={pageTitle} />

        {/* Page Content */}
        <main className="flex-1 overflow-auto p-6">{children}</main>
      </div>
    </div>
  );
}