import { Metadata, Viewport } from "next";
import "./globals.css";
import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
import { notFound } from "next/navigation";
import i18nConfig from "../../i18nConfig";
import initTranslations from '@/lib/i18n';
import TranslationsProvider from "@/components/utils/TranslationsProdiver";

export const metadata: Metadata = {
  title: 'Dashboard',
  description: 'Webapp dashboard',
  manifest: '/manifest.json',
}

export const viewport: Viewport = {
  themeColor: '#F4F5F9',
}

const i18nNamespaces = ['common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = "fa";
  if (!i18nConfig.locales.includes(locale)) {
    notFound();
  }
  const { resources } = await initTranslations(locale, i18nNamespaces);

  return (

    <html
      lang='fa'
      dir='rtl'
      className="h-svh overflow-hidden">
      <body

        className={`antialiased bg-background h-svh overflow-hidden`}
      >
        <ReactQueryProvider>
          <TranslationsProvider
            namespaces={i18nNamespaces}
            locale={locale}
            resources={resources}>
            <div id="root" className="h-svh overflow-hidden">
              {children}
            </div>
          </TranslationsProvider>
        </ReactQueryProvider>
      </body>
    </html >
  );
}
