import { Suspense } from "react";
import { Outlet } from "react-router-dom";
import { JobLiveProvider } from "../../data/JobLiveContext";
import { FirstRunProvider } from "../../firstRun/FirstRunContext";
import { ActiveJobsStrip } from "./ActiveJobsStrip";
import { FirstRunBar } from "./FirstRunBar";
import { MobileDock } from "./MobileDock";
import { PageHelpProvider } from "./PageHelp";
import { SidebarNav } from "./SidebarNav";
import { Topbar } from "./Topbar";

export function AppShell() {
  return (
    <JobLiveProvider>
      <PageHelpProvider>
        <FirstRunProvider>
        <div className="hb-shell">
          <div className="hb-shell__header">
            <Topbar />
            <ActiveJobsStrip />
            <FirstRunBar />
          </div>
          <div className="hb-shell__body">
            <SidebarNav />
            <main className="hb-main">
              <div className="hb-main__inner">
                <Suspense
                  fallback={
                    <div
                      className="hb-route-loading hb-route-loading--content"
                      role="status"
                      aria-label="Loading"
                    />
                  }
                >
                  <Outlet />
                </Suspense>
              </div>
            </main>
          </div>
          <MobileDock />
        </div>
        </FirstRunProvider>
      </PageHelpProvider>
    </JobLiveProvider>
  );
}
