// These styles apply to every route in the application
import '@/styles/globals.css'
import { Metadata } from "next";
import { Inter } from "next/font/google";
import { Toaster } from "react-hot-toast";
import AuthStatus from "@/components/auth-status";
import { Suspense } from "react";
import { ThemeProvider } from '@/providers/theme-provider';
import { ModalProvider } from '@/providers/modal-provider';
import { ToasterProvider } from '@/providers/toast-providers';
import BackgroundImage from '@/components/background-image';

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

const title = "Dashboard";
const description = "CMS Créé par ProjOctopus";

export const metadata: Metadata = {
  title,
  description,
  themeColor: [
		{ media: "(prefers-color-scheme: light)", color: "white" },
		{ media: "(prefers-color-scheme: dark)", color: "black" },
	],
  icons: {
		icon: "/favicon.ico",
	},
	openGraph: {
		title: "ProjOctopus - Transformez vos Idées Digitales en Réalité",
		description: "Bienvenue chez ProjOctopus, votre partenaire pour concrétiser des projets numériques exceptionnels !",
		url: "https://projoctopus.com",
		images: {
			url: "https://projoctopus.com/public/LogoProjOctopus.png",
			width: "572",
			height: "568",
			type: "image/png"
		},
		type: "website",
		locale: "fr_FR"
	}
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr" suppressHydrationWarning>
      <body className={inter.variable} suppressHydrationWarning>
        <BackgroundImage />
        <ThemeProvider attribute='class' defaultTheme='dark' enableSystem >
          <ModalProvider />
          <ToasterProvider />
          <Suspense fallback="Loading...">
            
            {/*<AuthStatus />*/}
            {/*Faire une page d'accueil*/}
          </Suspense>
          {children}
        </ThemeProvider>
        <Toaster />
      </body>
    </html>
  );
}