import "@/app/globals.css"
import "@scandic-hotels/design-system/style.css"

import Script from "next/script"

import TrpcProvider from "@/lib/trpc/Provider"

import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
import { getIntl } from "@/i18n"
import ServerIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"

import styles from "./layout.module.css"

import type { Metadata } from "next"

import type { LangParams, LayoutArgs } from "@/types/params"

export const metadata: Metadata = {
  title: "Webview",
}

export default async function RootLayout({
  children,
  params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
  setLang(params.lang)
  const { defaultLocale, locale, messages } = await getIntl()

  return (
    <html lang={params.lang}>
      <head>
        <AdobeSDKScript />
        <Script id="ensure-adobeDataLayer">{`
          window.adobeDataLayer = window.adobeDataLayer || []
        `}</Script>
      </head>
      <body className={styles.layout}>
        <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
          <TrpcProvider>{children}</TrpcProvider>
        </ServerIntlProvider>
      </body>
    </html>
  )
}
