import type { Metadata } from "next"
import type { ReactNode } from "react"

import { Manrope } from "next/font/google"

import "@shared/styles/global.scss"

import { AppProviders } from "@shared/context/AppProviders"

export const metadata: Metadata = {
	title: "Coffee Project",
	description: "Standalone Next.js app using FSD structure",
}

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

export default function RootLayout({
	children,
}: Readonly<{
	children: ReactNode
}>) {
	return (
		<html lang="ru" className={manrope.variable} suppressHydrationWarning>
			<head>
				<script
					dangerouslySetInnerHTML={{
						__html: `(function(){try{var t=localStorage.getItem("theme");var d;if(t==="light"||t==="dark"){d=t}else{d=window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light"}document.documentElement.setAttribute("data-theme",d);document.documentElement.classList.add(d)}catch(e){document.documentElement.setAttribute("data-theme","light");document.documentElement.classList.add("light")}})()`,
					}}
				/>
			</head>
			<body>
				<div id="app-root">
					<AppProviders>{children}</AppProviders>
				</div>
			</body>
		</html>
	)
}
