// DEMO 7
// https://keenthemes.com/metronic/tailwind/react/demo7

import { Outlet } from 'react-router-dom';
import { useBodyClass } from '@crux-kit/hooks';
import { LayoutNames } from '#app/config/types';
import { AppFooter, Toolbar, ToolbarHeading, useLayoutChrome, useLayoutSettings } from '../shared';
import { Header } from './components/Header';

export const AdvancedMegaMenuLayout = () => {
  useLayoutSettings(LayoutNames.ADVANCE_MEGA_MENU);
  const { showToolbar, showFooter } = useLayoutChrome();

  useBodyClass(`
    [--header-height-default:95px]
    data-[sticky-header=on]:[--header-height:60px]
    [--header-height:var(--header-height-default)]
    [--header-height-mobile:70px]
  `);

  return (
    <>
      <div className="flex grow flex-col in-data-[sticky-header=on]:pt-(--header-height-default)">
        <Header />

        <main className="grow" role="content">
          {showToolbar && (
            <Toolbar>
              <ToolbarHeading />
            </Toolbar>
          )}
          <Outlet />
        </main>

        {showFooter && <AppFooter />}
      </div>
    </>
  );
};