import type { Metadata } from 'next'
import './globals.css'
import { Footer } from '@/compositions/Footer/Footer'
import { comment } from '@/app/(home)/layout-comment'
import { FONT_MAP, getFont } from '@/assets/fonts'
import { siteConfig } from '@/config/site'
import { FetchedMenu } from '@/components/Menu/FetchedMenu'

export const dynamic = 'force-dynamic'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: {
      default: siteConfig.name,
      template: `%s | ${siteConfig.shortName}`,
    },
    description: siteConfig.description,
    keywords: siteConfig.keywords,
    metadataBase: new URL(siteConfig.url),
    openGraph: {
      title: siteConfig.name,
      description: siteConfig.description,
      url: siteConfig.url,
      siteName: siteConfig.name,
      images: [siteConfig.ogImage],
      locale: 'de_DE',
      type: 'website',
    },
  }
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const selectedDefaultFont = getFont(
    siteConfig.defaultFont,
    FONT_MAP.cairo,
  )
  const selectedHeaderFont = getFont(
    siteConfig.headerFont,
    FONT_MAP.faustina,
  )

  const themeStyle = {
    '--base-color': siteConfig.baseColor,
    '--shade1': siteConfig.shade1,
    '--shade2': siteConfig.shade2,
    '--shade3': siteConfig.shade3,
    '--contrast-color': siteConfig.contrastColor,
    '--contrast-shade1': siteConfig.contrastShade1,
    '--border-radius': siteConfig.borderRadius,
    '--header-font': selectedHeaderFont.style.fontFamily,
  } as React.CSSProperties

  return (
    <html lang="de" className={selectedDefaultFont.className} style={themeStyle}>
    <body>
    <div dangerouslySetInnerHTML={{ __html: comment }}></div>
    <FetchedMenu />
    <main className={'mainContent'}>
      {children}
    </main>
    <Footer />
    </body>
    </html>
  )
}
