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

import { Suspense } from "react"

import { overview } from "@/constants/routes/webviews"
import { serverClient } from "@/lib/trpc/server"

import MaxWidth from "@/components/MaxWidth"
import TrackingSDK from "@/components/TrackingSDK"
import Blocks from "@/components/Webviews/AccountPage/Blocks"
import LinkToOverview from "@/components/Webviews/LinkToOverview"
import { getLang } from "@/i18n/serverContext"

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

export default async function AccountPage() {
  const accountPageRes = await serverClient().contentstack.accountPage.get()

  if (!accountPageRes) {
    return null
  }

  const { tracking, accountPage } = accountPageRes

  const linkToOverview =
    `/${getLang()}/webview${accountPage.url}` !== overview[getLang()]

  return (
    <>
      <MaxWidth className={styles.blocks} tag="main">
        {linkToOverview ? <LinkToOverview /> : null}
        <Blocks content={accountPage.content} />
      </MaxWidth>

      <Suspense fallback={null}>
        <TrackingSDK pageData={tracking} />
      </Suspense>
    </>
  )
}