import React, { useState } from 'react';
import { Layout, Menu, theme, Button } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Router } from '../router';
import { usePageTitle } from '../hooks/page-title-context';
import Navbar from './nav/Navbar';
const { Header, Content, Footer, Sider } = Layout;








const AppLayout = ({ navbar, footer }) => {
    const [collapsed, setCollapsed] = useState(false);
    const { pageTitle } = usePageTitle();
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout >
            <Sider breakpoint="lg" collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Navbar/>
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Button type="text" icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsed(!collapsed)} style={{fontSize: '16px', width: 64, height: 64}}/>
                    {pageTitle}
                </Header>

                <Content style={{margin: '24px 16px 0'}}>
                    <div style={{padding: 24, minHeight: 360, background: colorBgContainer, borderRadius: borderRadiusLG}}>
                        <Router />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    {footer}
                    <br />
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};
export default AppLayout;