import React, { useState } from 'react';
import { Layout, theme } from 'antd';
import Slider from './components/Slider';
import HeaderCom from './components/Header';
import { Outlet } from 'react-router';

const { Content } = Layout;

export const Admin: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout>
            <Slider collapsed={collapsed} />
            <Layout>
                <HeaderCom collapsed={collapsed} setCollapsed={setCollapsed} />
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
    );
};