import type { Metadata } from "next";
import { Syne } from "next/font/google";
import localFont from "next/font/local";
import "./globals.css";
import { TopBar } from "@/components/home/TopBar";
import { Header } from "@/components/home/Header";
import { Footer } from "@/components/home/Footer";
import { Providers } from "@/context/Providers";
import { getBusinessInfo, getCategories, getCategoryTree } from "@/lib/meshkee";

// Body text — headings use the bold weight instead, see globals.css.
const iranyekan = localFont({
  variable: "--font-iranyekan",
  src: "../../public/fonts/iranyekanweblightfanum.woff",
  weight: "400",
});

const iranyekanBold = localFont({
  variable: "--font-iranyekan-bold",
  src: "../../public/fonts/iranyekanwebboldfanum.woff",
  weight: "700",
});

const syne = Syne({
  variable: "--font-syne",
  subsets: ["latin"],
  weight: ["600", "700", "800"],
});

export const metadata: Metadata = {
  title: "سانی‌هوم | فروشگاه لوازم خانگی",
  description: "فروشگاه آنلاین لوازم خانگی — یخچال، لباسشویی، تلویزیون و بیشتر",
};

export default async function RootLayout({ children }: LayoutProps<"/">) {
  const [categoryTree, categories, businessInfo] = await Promise.all([
    getCategoryTree(),
    getCategories(),
    getBusinessInfo(),
  ]);

  return (
    <html
      lang="fa"
      dir="rtl"
      className={`${iranyekan.variable} ${iranyekanBold.variable} ${syne.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">
        <Providers businessId={businessInfo?.id ?? "1"}>
          <TopBar />
          <Header categoryTree={categoryTree} categories={categories} />
          <main>{children}</main>
          <Footer businessInfo={businessInfo} categories={categories} />
        </Providers>
      </body>
    </html>
  );
}