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 {Link, Outlet} from 'react-router-dom';
import {Auth, ErrorBoundary, Footer, Jurisdiction} from '@components';
import HomeSkeleton from './Skeleton';
import {HOME_PATH} from '@routes';

const Home: FC = function() {
  return (
    <Layout className='container'>
      <Layout.Header className={css.header}>
        <Link to={HOME_PATH}>
          <img src={logo} alt='logo' className={css.logo} />
        </Link>
        <User />
      </Layout.Header>

      <Layout hasSider>

        <Menu />

        <Layout.Content>
          <Suspense>
            <Jurisdiction>
              <Outlet />
            </Jurisdiction>
            <Footer color='#666' />
          </Suspense>
        </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;