import { Header } from "@/components/header";
import { Toaster } from "@/components/ui/toaster";
import { cn } from "@/utils/styles";
import type { Metadata } from "next";

import "@/app/globals.css";
import { Inter as FontSans } from "next/font/google";

const fontSans = FontSans({
	subsets: ["latin"],
	variable: "--font-sans",
});

export const metadata: Metadata = {
	title: {
		default: "MYP",
		template: "%s | MYP",
	},
	description: "Generated by create next app",
};

interface RootLayoutProps {
	children: React.ReactNode;
}

export default function RootLayout(props: RootLayoutProps) {
	const { children } = props;

	return (
		<html lang="de" suppressHydrationWarning>
			<head />
			<body className={cn("min-h-dvh bg-muted font-sans antialiased", fontSans.variable)}>
				<Header />
				<main className="flex-grow max-w-screen-2xl w-full mx-auto flex flex-col p-8 gap-4 text-foreground">
					{children}
				</main>
				<Toaster />
			</body>
		</html>
	);
}
