import { Suspense } from "react";
import { Metadata } from "next";
import RootProvider from "@/providers/RootProvider";
import IntilProvider from "@/providers/IntilProvider";
import AntdProvider from "@/providers/AntdProvider";
import StoreProvider from "@/providers/StoreProvider";
import AosProvider from "@/providers/AosProvider";
import NextTopLoaderProvider from "@/providers/NextTopLoaderProvider";
import ClientWrapper from "@/providers/ClientWrapper";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import LoaderWrapper from "@/shared/Loader/LoaderWrapper";
import Logo from "@/public/logo.png";
import { getTranslations } from "next-intl/server";
// import "antd/dist/reset.css";
import "animate.css";
import "aos/dist/aos.css";
import "@/app/tailwind.css";
export async function generateMetadata(): Promise<Metadata> {
  const t = await getTranslations();
  return {
    title: t("website.title"),
    description: t("website.description"),
    icons: { icon: Logo.src },
    openGraph: { images: Logo.src },
    viewport: "width=device-width, initial-scale=1",
  };
}
interface RootLayoutProps {
  children: React.ReactNode;
  params: Promise<{ lng: string }>;
}
export default async function RootLayout({
  children,
  params,
}: Readonly<RootLayoutProps>) {
  const { lng } = await params;
  return (
    <RootProvider lng={lng}>
      <IntilProvider lng={lng}>
        <AntdProvider lng={lng}>
          <NextTopLoaderProvider />
          <Suspense fallback={<LoaderWrapper />}>
            <StoreProvider>
              <div className="flex min-h-screen flex-col">
                <AosProvider>
                  <Header />
                  {children}
                  <Footer />
                  <ClientWrapper />
                </AosProvider>
              </div>
            </StoreProvider>
          </Suspense>
        </AntdProvider>
      </IntilProvider>
    </RootProvider>
  );
}