import { Layout, Menu } from "antd";
import { Outlet } from "react-router-dom";

const { Header, Sider, Content, Footer } = Layout;

export default function BasicLayout() {
  return (
    <Layout style={{ minHeight: "100vh" }}>
      
      {/* Header */}
      <Header>
        Header
      </Header>

      {/* Middle Section (Sidebar + Content) */}
      <Layout style={{ flex: 1 }}>
        
        <Sider width={200}>
          <Menu
            mode="inline"
            items={[
              { key: "1", label: "Item 1" },
              { key: "2", label: "Item 2" }
            ]}
          />
        </Sider>

        <Content style={{ padding: 24 }}>
          Content Area
        </Content>

      </Layout>

      {/* Footer */}
      <Footer>
        Footer
      </Footer>

    </Layout>
  );
}