import Header from "@/components/Header/Header";
import ThemeProvider from "@/components/Providers/ThemeProvider";
import { geistMono, geistSans } from "@/lib/fonts";
import { ReactNode } from "react";
import "./globals.css";
import QueryProvider from "@/components/Providers/query-provider";

type RootLayoutProps = {
  children: ReactNode;
};

const RootLayout = ({ children }: Readonly<RootLayoutProps>) => {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute={"class"}
          defaultTheme="dark"
          enableSystem={false}>
          <Header />

          <main className="mx-auto max-w-xl px-6 py-3 pt-13 md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
            <QueryProvider>{children}</QueryProvider>
          </main>
        </ThemeProvider>
      </body>
    </html>
  );
};

export default RootLayout;
