import type { Metadata } from "next";
import { Fraunces, Outfit } from "next/font/google";
import { CodeSlot } from "@/components/CodeSlot";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import { VisitTracker } from "@/components/VisitTracker";
import { getInjectedCodes, getSeoSettings } from "@/lib/db";
import "./globals.css";

const outfit = Outfit({
  subsets: ["latin"],
  variable: "--font-outfit",
});

const fraunces = Fraunces({
  subsets: ["latin"],
  variable: "--font-fraunces",
});

export async function generateMetadata(): Promise<Metadata> {
  const seo = await getSeoSettings();
  return {
    title: {
      default: seo.title,
      template: `%s · ${seo.siteName}`,
    },
    description: seo.description,
    keywords: seo.keywords.split(",").map((k) => k.trim()).filter(Boolean),
    openGraph: {
      title: seo.ogTitle || seo.title,
      description: seo.ogDescription || seo.description,
      siteName: seo.siteName,
      type: "website",
    },
  };
}

export const dynamic = "force-dynamic";

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const codes = await getInjectedCodes();
  return (
    <html lang="en-GH">
      <body className={`${outfit.variable} ${fraunces.variable} grain antialiased`}>
        <VisitTracker />
        <CodeSlot html={codes.header} head />
        <CodeSlot html={codes.body} />
        <SiteHeader />
        <main className="min-h-[70vh]">{children}</main>
        <SiteFooter />
        <CodeSlot html={codes.footer} />
      </body>
    </html>
  );
}
