import type { Metadata } from "next";
import { Unbounded, Manrope } from "next/font/google";
import { Providers } from "@/components/Providers";
import { getSiteUrl, SITE_NAME } from "@/lib/site";
import "./globals.css";
import "./console-shells.css";
import "./profile-skins.css";

const display = Unbounded({
  variable: "--font-display",
  subsets: ["latin"],
  weight: ["500", "600", "700"],
});

const body = Manrope({
  variable: "--font-body",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

const siteUrl = getSiteUrl();

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: {
    default: `${SITE_NAME} — Retro Games with Boot Theater`,
    template: `%s · ${SITE_NAME}`,
  },
  description:
    "HollowCade — pick your cabinet UI, boot in, play retro games in the browser.",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: siteUrl,
    siteName: SITE_NAME,
    title: `${SITE_NAME} — Retro Games with Boot Theater`,
    description:
      "Pick your cabinet UI, boot in, play retro games in the browser.",
  },
  twitter: {
    card: "summary_large_image",
    title: `${SITE_NAME} — Retro Games with Boot Theater`,
    description:
      "Pick your cabinet UI, boot in, play retro games in the browser.",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html
      lang="en"
      className={`${display.variable} ${body.variable} h-full antialiased`}
      suppressHydrationWarning
    >
      <body className="min-h-full">
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
