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-0 text-text-1 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>
  )
}