import React, { ReactNode } from 'react'
import Header from './Header'
import Sidebar from './Sidebar'
import StatusBar from './StatusBar'

interface LayoutProps {
  children: ReactNode
  isConnected: boolean
}

const Layout: React.FC<LayoutProps> = ({ children, isConnected }) => {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Fixed header */}
      <Header isConnected={isConnected} />
      
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar navigation */}
        <Sidebar />
        
        {/* Main content area */}
        <main className="flex-1 overflow-auto p-4">
          <div className="max-w-none">
            {children}
          </div>
        </main>
      </div>

      {/* Fixed status bar at bottom */}
      <StatusBar isConnected={isConnected} />
    </div>
  )
}

export default Layout
