import { ReactNode } from "react";
import type { Metadata } from 'next';
import { NextIntlClientProvider } from "next-intl";
import NextTopLoader from 'nextjs-toploader';
import Providers from '@/components/layout/providers';
import { Toaster } from '@/components/ui/sonner';
import MemberBanner from '@/components/shared/member-banner';
import NewsletterPopup from '@/components/shared/newsletter-popup';
import { GoogleAnalytics } from '@/components/shared/google-analytics/google-analytics';
import { StopImpersonatingButton } from "@/components/stop-impersonating-button";
import { cn } from '@/lib/utils/cn';
import { fontVariables } from '@/lib/utils/font';
import { config } from '@/config/env';
import './globals.css';
import './theme.css';

export const metadata: Metadata = {
  title: 'Magasinet KBH',
  description: 'Københavns magasin om byens rum og byens liv siden 2005'
};

export default async function RootLayout({
  children
}: {
  children: ReactNode;
}) {
  return (
    <html suppressHydrationWarning lang='da'>
      <body className={cn('font-sans antialiased', fontVariables)}>
        <NextTopLoader showSpinner={false} color='var(--color-client-red)' />
        <GoogleAnalytics tagId={config.googleAnalytics.tagId} />
        <NextIntlClientProvider>
          <Providers>
            <Toaster />
            {children}
            <MemberBanner />
            <NewsletterPopup />
            <StopImpersonatingButton />
          </Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
