import type { ReactNode } from 'react';
import type { MainTab } from '../../types/navigation';
import { TopBar } from './TopBar';
import { SubMenuBar } from './SubMenuBar';

interface MainLayoutProps {
  children: ReactNode;
  activeMainTab: MainTab;
  onMainTabChange: (tab: MainTab) => void;
}

export function MainLayout({ children, activeMainTab, onMainTabChange }: MainLayoutProps) {
  return (
    <div className="h-screen w-screen flex flex-col bg-bg-base text-fg overflow-hidden">
      {/* Top Navigation - Level 1 */}
      <TopBar activeTab={activeMainTab} onTabChange={onMainTabChange} />

      {/* Sub Menu Navigation - Level 2 */}
      <SubMenuBar activeMainTab={activeMainTab} />

      {/* Main Content Area */}
      <div className="flex flex-1 overflow-hidden">{children}</div>
    </div>
  );
}
