import type { Metadata } from "next";
import type { ReactNode } from "react";

import { Poppins, DM_Sans } from "next/font/google";
import "./globals.css";

import ModalRenderer from "../lib/modal-system/ModalRender";
import Providers from "../store/providers";

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}`}>
        <Providers>
          {children}
          <ModalRenderer />
        </Providers>
      </body>
    </html>
  );
}
