import { Geist_Mono, Inter, Nunito } from "next/font/google";

import { cn } from "@turbostarter/ui";

import { appConfig } from "~/config/app";

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

const wordmark = Nunito({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-wordmark",
  weight: ["700"],
});

const mono = Geist_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-mono",
  weight: ["300", "400", "500"],
});

interface BaseLayoutProps {
  readonly locale: string;
  readonly children: React.ReactNode;
}

export const BaseLayout = ({ children, locale }: BaseLayoutProps) => {
  return (
    <html lang={locale} className={cn(sans.variable, wordmark.variable, mono.variable)}>
      <body
        suppressHydrationWarning
        className="bg-background text-foreground flex min-h-screen flex-col items-center justify-center font-sans antialiased"
        data-theme={appConfig.theme.color}
      >
        {children}
      </body>
    </html>
  );
};
