import css from './index.module.css';
import {FC, Suspense} from 'react';
import {Layout} from 'antd';
import logo from '@assets/images/logo.png';
import Menu from './menu';
import User from './user';
import {Outlet} from 'react-router-dom';
import {Auth, ErrorBoundary, Footer, Jurisdiction} from '@components';
import {useMenu} from './hooks';
import HomeSkeleton from './Skeleton';

const Home: FC = function() {
  const menus = useMenu();

  return (
    <Layout className='container'>
      <Layout.Header className={css.header}>
        <img src={logo} alt='logo' className={css.logo} />
        <User />
      </Layout.Header>

      <Layout>
        <Layout.Sider className={css.sliderBackground}>
          <Menu menus={menus!} />
        </Layout.Sider>

        <Layout.Content>
          <Suspense>
            <Jurisdiction>
              <Outlet />
            </Jurisdiction>
          </Suspense>
          <Footer color='#666' />
        </Layout.Content>
      </Layout>
    </Layout>
  );
};

const HomeSuspense: FC = function() {
  return (
    <Auth>
      <main className='container'>
        <ErrorBoundary>
          <Suspense fallback={<HomeSkeleton />}>
            <Home />
          </Suspense>
        </ErrorBoundary>
      </main>
    </Auth>
  );
};

export default HomeSuspense;
