import { Suspense } from "react";
import { theme } from "@/config/theme/mantine-theme";
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
import { ModalsProvider } from "@mantine/modals";
import { Notifications } from "@mantine/notifications";

import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import "@mantine/dates/styles.css";
import "mantine-react-table/styles.css";
import "@/config/theme/globals.css";

import { type Metadata } from "next";

export const metadata: Metadata = {
  title: "My ProofKit App",
  description: "Generated by proofkit",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html suppressHydrationWarning lang="en">
      <head>
        <Suspense>
          <ColorSchemeScript defaultColorScheme="auto" />
        </Suspense>
      </head>
      <body suppressHydrationWarning>
        <MantineProvider defaultColorScheme="auto" theme={theme}>
          <Notifications />
          <ModalsProvider>{children}</ModalsProvider>
        </MantineProvider>
      </body>
    </html>
  );
}
