import FuseSuspense from '@fuse/core/FuseSuspense';
import AppContext from 'app/AppContext';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import i18next from 'i18next';
import { memo, useContext } from 'react';
import { useSelector } from 'react-redux';
import { useRoutes } from 'react-router-dom';
import FooterLayout2 from './components/FooterLayout2';
import HeaderLayout2 from './components/HeaderLayout2';

import en from './i18n/en';

i18next.addResourceBundle('en', 'layout2', en);

function Layout2(props) {
  const config = useSelector(selectFuseCurrentLayoutConfig);
  const appContext = useContext(AppContext);
  const { routes } = appContext;

  return (
    <>
      {config.header.display && <HeaderLayout2 />}
      <main id="fuse-main" className="flex flex-col min-h-full min-w-full mt-72">
        <FuseSuspense>{useRoutes(routes)}</FuseSuspense>
        {props.children}
      </main>
      {config.footer.display && <FooterLayout2 />}
    </>
  );
}

export default memo(Layout2);