import { Noto_Kufi_Arabic } from "next/font/google";
import localFont from "next/font/local";
import { NextIntlClientProvider, hasLocale } from "next-intl";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import "./globals.css";
import { Metadata } from "next";
import Header from "@/components/Shared/Header/Index";
import Footer from "@/components/Shared/Footer/Index";
import QueryProvider from "@/providers/QueryProvider";
import { BookingProvider } from "@/context/BookingContext";
import { VendorProvider } from "@/context/VendorContext";

export const metadata: Metadata = {
  title: "Get Ticket",
  description: "Get Ticket",
};

const notoKufiArabic = Noto_Kufi_Arabic({
  subsets: ["arabic"],
  weight: ["400", "700"],
  variable: "--font-arabic",
});

const avenir = localFont({
  src: [
    {
      path: "../../../public/font-AvenirLTPro/AvenirLTProLight.otf",
      weight: "300",
      style: "normal",
    },
    {
      path: "../../../public/font-AvenirLTPro/AvenirLTProBook.otf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../../public/font-AvenirLTPro/AvenirLTProMedium.otf",
      weight: "500",
      style: "normal",
    },
    {
      path: "../../../public/font-AvenirLTPro/AvenirLTProHeavy.otf",
      weight: "700",
      style: "normal",
    },
    {
      path: "../../../public/font-AvenirLTPro/AvenirLTProBlack.otf",
      weight: "900",
      style: "normal",
    },
  ],
  variable: "--font-english-body",
  display: "swap",
});

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) notFound();

  return (
    <html
      lang={locale}
      dir={locale === "ar" ? "rtl" : "ltr"}
      className={`${notoKufiArabic.variable} ${avenir.variable}`}
    >
      <body>
        <QueryProvider>
          <NextIntlClientProvider>
            <VendorProvider>
              <BookingProvider>
                <Header />
                <main >{children}</main>
                <Footer />
              </BookingProvider>
            </VendorProvider>
          </NextIntlClientProvider>
        </QueryProvider>
      </body>
    </html>
  );
}