import React from 'react';
import { Layout, theme } from 'antd';
import LayoutFooter from './LayoutFooter';
import LayoutHeader from './LayoutHeader';
import LayoutSidebar from './LayoutSidebar';


const { Content } = Layout;

const MainLayout = ({ children }) => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ height: '100vh' }}>
      <LayoutSidebar />
      <Layout
      style={{
        overflow: 'auto',

      }}>
        <LayoutHeader />
        <Content
          style={{
            margin: '24px 16px 0',
            flex: '1 0 auto',
          }}
        >
          {/* <div
            style={{
              padding: 24,
              minHeight: '100%',
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          > */}
            {children}
          {/* </div> */}
        </Content>
        {/* <LayoutFooter /> */}
      </Layout>
    </Layout>
  );
};
export default MainLayout;