import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ThemeProvider } from "next-themes";
import "./globals.css";

import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { ContactFormProvider } from "@/components/contact-form-context";
import { OpengraphImage } from "@/utils";

const inter = Inter({ subsets: ["latin"] });

const baseUrl = "http://localhost:3000";

export async function generateMetadata(): Promise<Metadata> {
	const title = "Estate Settlement";

	const description =
		"We help families and heirs navigate estate settlement with clarity, fairness, and confidence";

	return {
		metadataBase: new URL(baseUrl),
		title,
		description,
		openGraph: {
			title,
			description,
			url: baseUrl,
			images: [
				{
					url: OpengraphImage,
					secureUrl: OpengraphImage,
					width: 1200,
					height: 630,
					alt: "Preview image for Estate Settlement",
				},
			],
			type: "website",
			siteName: title,
		},
		twitter: {
			title,
			description,
			images: [
				{
					url: OpengraphImage,
					secureUrl: OpengraphImage,
					width: 1200,
					height: 630,
					alt: "Preview image for Estate Settlement",
				},
			],
			card: "summary_large_image",
		},
	};
}

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body className={inter.className}>
				<ThemeProvider enableSystem={false} attribute="class">
					<ContactFormProvider>
						<Navbar />
						<div>{children}</div>
						<Footer />
					</ContactFormProvider>
				</ThemeProvider>
			</body>
		</html>
	);
}
