import { Layout, Menu, Breadcrumb } from 'antd';
// import { createFromIconfontCN } from '@ant-design/icons';
import '../App.css';
import 'antd/dist/antd.min.css';
import { Switch } from 'react-router-dom';
import { CCategoryList, SwitchRoute, HeaderSite } from '../components';

const { Content, Footer, Sider } = Layout;
// const IconFont = createFromIconfontCN({
//   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
// });

function MainPage () {
  return (
    <Layout>
     <HeaderSite/>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}/>
      <Layout className="site-layout-background" style={{ marginTop: '-2px 0' }}>
        <Sider className="site-layout-background" width={230}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
            <CCategoryList/>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content
          <Switch>
            <SwitchRoute/>
          </Switch>
        </Content>
      </Layout>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Viktoriia Yurchenko 2022</Footer>
  </Layout>
  );
}

export default MainPage;
