import type { QueryClient } from "@tanstack/react-query";
import { QueryProvider } from "../../provider/query-provider";
import { PopupProvider } from "../../provider/popup-provider";
import { ClientIpGuard } from "../../lib/client-ip-guard";
import type { MenuItem } from "../../api";
import { SidebarProvider } from "../sidebar";
import { LNB } from "../lnb";
import { Header } from "../header";
import { Footer } from "../footer";
import "./common.css";

export function BaseLayout({
  children,
  queryClient,
  currentPath,
  handleMenuClick,
}: {
  children: React.ReactNode;
  queryClient?: QueryClient;
  currentPath?: string;
  handleMenuClick?: (item: MenuItem) => void;
}) {
  return (
    <QueryProvider queryClient={queryClient}>
      <ClientIpGuard currentPath={currentPath}>
        <PopupProvider>
          <SidebarProvider>
            <div className="flex-1">
              <Header />
              <div className="flex">
                <LNB
                  currentPath={currentPath}
                  handleMenuClick={handleMenuClick}
                />
                <div className="flex min-h-[calc(100vh-50px)] flex-1 flex-col overflow-auto">
                  <div className="flex-1">{children}</div>
                  <Footer />
                </div>
              </div>
            </div>
          </SidebarProvider>
        </PopupProvider>
      </ClientIpGuard>
    </QueryProvider>
  );
}