import { Layout, notification } 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;

notification.config({
  placement: 'topRight', // topLeft | topRight | bottomLeft | bottomRight
  top: 20, // distance from top
  bottom: 24, // distance from bottom
  duration: 3, // auto close time (seconds)
  maxCount: 3, // max notifications shown
});

export default function App() {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <>
      <Layout className="app-root">
        <Sidebar collapsed={collapsed} onCollapse={setCollapsed} />
        <Layout className="app-main">
          <AppHeader />
          <Content>
            <Outlet />
          </Content>
          <AppFooter />
        </Layout>
      </Layout>
    </>
  );
}