import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react";

import { Poppins, DM_Sans } from "next/font/google";
import NextTopLoader from "nextjs-toploader";
import "./globals.css";

import ModalRenderer from "../lib/modal-system/ModalRender";
import Providers from "../store/providers";
import ScrollToTop from "../components/ScrollToTop";
import WelcomeModal from "../components/modals/ComingSoon";
import ComingSoonWrapper from "../components/ComingSoonWrapper";
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};
const poppins = Poppins({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800"],
  variable: "--font-poppins",
});

const dmSans = DM_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-dm-sans",
});

export const metadata: Metadata = {
  title: "KleboAI",
  description: "AI generated image detector",
};

interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`bg-body-bg ${poppins.variable} ${dmSans.variable}`}>
        <NextTopLoader
          color="#3b82f6"
          initialPosition={0.08}
          crawlSpeed={200}
          height={3}
          crawl={true}
          easing="ease"
          speed={200}
          shadow="0 0 10px #3b82f6,0 0 5px #3b82f6"
          showSpinner={false}
        />
        <Providers>
          <ComingSoonWrapper/>
          {children}

          <ScrollToTop />
          <ModalRenderer />
        </Providers>
      </body>
    </html>
  );
}
