import "@mantine/core/styles.css";
import "@mantine/notifications/styles.css";
import React, { ReactNode } from "react";
import {
    ColorSchemeScript,
    mantineHtmlProps,
    MantineProvider,
} from "@mantine/core";
import Header from "@/components/layout/Header/Header";
import { theme } from "@/theme";
import "@/app/global.css";
import { Notifications } from "@mantine/notifications";
import Footer from "@/components/layout/Footer/Footer";
import ReduxProvider from "@/providers/ReduxProvider";

export const metadata = {
    title: "ID LogiDex",
    description: "ID LogiDex",
};

type Props = {
    children: ReactNode;
};

export default function RootLayout({ children }: Props) {
    return (
        <html
            lang="ru"
            {...mantineHtmlProps}>
            <head>
                <ColorSchemeScript defaultColorScheme={"auto"} />
                <link
                    rel="shortcut icon"
                    href="/favicon.svg"
                />
                <link
                    rel="stylesheet"
                    href="global.css"
                />
                <meta
                    name="viewport"
                    content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
                />
                <title />
            </head>
            <body>
                <MantineProvider
                    theme={theme}
                    defaultColorScheme={"auto"}>
                    <ReduxProvider>
                        <Header />
                        {children}
                        <Footer />
                    </ReduxProvider>
                    <Notifications />
                </MantineProvider>
            </body>
        </html>
    );
}
