import type { Metadata } from "next";
import { Carter_One, Oswald, Vazirmatn } from "next/font/google";
import { AppProviders } from "@/components/AppProviders";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { TopHeader } from "@/components/TopHeader";
import { getTenant } from "@/lib/api";
import { SITE } from "@/lib/site";
import "./globals.css";

const vazir = Vazirmatn({
  subsets: ["arabic", "latin"],
  variable: "--font-vazir",
  display: "swap",
});

const oswald = Oswald({
  subsets: ["latin"],
  variable: "--font-oswald",
  display: "swap",
});

const carter = Carter_One({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-carter-one",
  display: "swap",
});

export const metadata: Metadata = {
  title: `${SITE.nameFa} | ${SITE.tagline}`,
  description: SITE.aboutShort,
};

export default async function RootLayout({ children }: LayoutProps<"/">) {
  const tenant = await getTenant();

  return (
    <html lang="fa" dir="rtl" className={`${vazir.variable} ${oswald.variable} ${carter.variable} h-full antialiased`}>
      <body className="min-h-full flex flex-col bg-white text-ink">
        <AppProviders businessId={tenant ? String(tenant.id) : ""}>
          <TopHeader />
          <Header />
          <main className="flex-1">{children}</main>
          <Footer />
        </AppProviders>
      </body>
    </html>
  );
}