import "@/app/globals.css";
import * as React from "react";
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { Container, ThemeProvider } from "@mui/material";
import Appbar from "../components/appbar";
import theme from "../theme";
import { AuthProvider } from "../lib/authContext";
import { Suspense } from "react";
import Loading from "./loading";
import { WebVitals } from "../_components/web-vitals";

export const metadata = {
	title: "InfoGare",
	description: "Generated by create next app",
};

export default function RootLayout({ children }) {
	return (
		<html lang="fr">
			<body style={{ height: '100%', width: '100%' }}>
				<WebVitals />
				<AppRouterCacheProvider>
					<AuthProvider>
						<ThemeProvider theme={theme}>
							<Appbar />
							<Container sx={{ maxWidth: '100% !important', padding: '0 !important' }}>
								<Suspense fallback={<Loading />}>
									{children}
								</Suspense>
							</Container>
						</ThemeProvider>
					</AuthProvider>
				</AppRouterCacheProvider>
			</body>
		</html>
	);
}
