import { Navigation } from "@/components/layout/navigation";
import { Sidebar } from "@/components/layout/sidebar";
import { Footer } from "@/components/layout/footer";
import BackToTop from "@/components/shared/back-to-top";
import ToastContainer from "@/components/shared/toast";
import { AnnouncementBanner } from "@/components/shared/announcement-banner";
import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav";
export default function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen min-w-0 flex flex-col overflow-x-clip">
      <Navigation />
      <AnnouncementBanner />
      <div className="flex w-full min-w-0 flex-1">
        <Sidebar />
        {/* Bottom padding accounts for the fixed mobile bottom-nav (64px)
            plus the iOS safe-area inset on notched devices. */}
        <main
          id="main"
          className="mx-auto min-w-0 w-full max-w-7xl flex-1 p-4 lg:p-6 pb-[calc(64px+env(safe-area-inset-bottom))] md:pb-0"
        >
          {children}
        </main>
      </div>
      <Footer />
      <BackToTop />
      <ToastContainer />
      <MobileBottomNav />
    </div>
  );
}