import { Layout } from 'antd';
import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import './App.css';
import { AppFooter } from './Layout/Footer';
import AppHeader from './Layout/Header';
import Sidebar from './Layout/Sidebar';

const { Content, Footer } = Layout;

export default function App() {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <>
      <Layout style={{ minHeight: '100vh' }}>
        <AppHeader />
        <Layout>
          <Sidebar collapsed={collapsed} onCollapse={setCollapsed} />
          <Layout style={{ padding: '24px' }}>
            <Content style={{ minHeight: 'calc(100vh - 64px)' }}>
              <Outlet />
            </Content>
          </Layout>
        </Layout>
      </Layout>
      <AppFooter />
    </>
  );
}