import type { Metadata, Viewport } from "next";
import { Plus_Jakarta_Sans } from "next/font/google";
import { brandConfig } from "@/config/brand";
import { AuthProvider } from "@/context/AuthContext";
import "./globals.css";

const plusJakartaSans = Plus_Jakarta_Sans({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-sans",
});

export const metadata: Metadata = {
  title: {
    default: `${brandConfig.appName} | ${brandConfig.schoolName}`,
    template: `%s | ${brandConfig.appName}`,
  },
  description: `Sistem Informasi Manajemen Sekolah Terpadu untuk ${brandConfig.schoolName} - ${brandConfig.tagline}`,
  icons: {
    icon: brandConfig.logo.placeholderSrc,
  },
};

export const viewport: Viewport = {
  themeColor: "#0F2B5B",
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="id" className={plusJakartaSans.variable} suppressHydrationWarning>
      <body className="font-sans antialiased bg-brand-bg text-brand-text" suppressHydrationWarning>
        <AuthProvider>{children}</AuthProvider>
      </body>
    </html>
  );
}