import type { Metadata } from "next";
import "./global.css";
import { LoginModalProvider } from "@/app/LoginModalContext";
import { LoginModal } from "@/app/LoginModal";
import { loadCurrentDid } from "@/data/queries";
import { Suspense } from "react";
import { AuthProvider } from "@/app/AuthContext";
export const metadata: Metadata = {
  metadataBase: new URL("https://sidetrail.app"),
  title: "sidetrail",
  description: "trails worth walking",
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Suspense fallback={null}>
          <Auth>
            <LoginModalProvider>
              {children}
              <LoginModal />
            </LoginModalProvider>
          </Auth>
        </Suspense>
      </body>
    </html>
  );
}

async function Auth({ children }: { children: React.ReactNode }) {
  const did = await loadCurrentDid();
  return <AuthProvider did={did}>{children}</AuthProvider>;
}
