import type { Metadata } from "next";
import { Manrope, Space_Mono } from "next/font/google";
import { headers } from "next/headers";
import "./globals.css";
import { APP_NAME } from "@/lib/constants";

const manrope = Manrope({
  subsets: ["latin"],
  variable: "--font-manrope",
  display: "swap",
});

const spaceMono = Space_Mono({
  subsets: ["latin"],
  variable: "--font-space-mono",
  weight: ["400", "700"],
  display: "swap",
});

export const metadata: Metadata = {
  title: APP_NAME,
  description: "Internal Otsuka VEEVA dashboard for email analytics and imports",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const nonce = (await headers()).get("x-nonce") ?? undefined;

  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${manrope.variable} ${spaceMono.variable} h-full antialiased`}
    >
      <head>
        {nonce && <meta name="csp-nonce" content={nonce} />}
      </head>
      <body suppressHydrationWarning className="min-h-full bg-slate-50 text-slate-900">
        {children}
      </body>
    </html>
  );
}
