import type { Viewport } from "next";
import { cookies, headers } from "next/headers";
import { Cairo, Noto_Sans, Noto_Sans_Thai } from "next/font/google";
import { localeFromRequest } from "@/lib/geo-locale";
import { needsSetup } from "@/lib/setup";
import { redirect } from "next/navigation";
import "../globals.css";

const cairo = Cairo({
  subsets: ["arabic", "latin"],
  variable: "--font-cairo",
});

const noto = Noto_Sans({
  subsets: ["latin", "latin-ext", "vietnamese"],
  variable: "--font-noto",
});

const notoThai = Noto_Sans_Thai({
  subsets: ["thai"],
  variable: "--font-thai",
});

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#0b6b4a",
  viewportFit: "cover",
};

export default async function ShortLayout({ children }: { children: React.ReactNode }) {
  if (await needsSetup()) redirect("/setup");
  const locale = await localeFromRequest(
    await headers(),
    (await cookies()).get("NEXT_LOCALE")?.value,
  );
  const dir = locale === "ar" ? "rtl" : "ltr";

  return (
    <html
      lang={locale}
      dir={dir}
      className={`${cairo.variable} ${noto.variable} ${notoThai.variable} h-full`}
    >
      <body className="min-h-full bg-background text-foreground antialiased">{children}</body>
    </html>
  );
}
