web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

import { Suspense } from "react"

import { serverClient } from "@/lib/trpc/server"

import Blocks from "@/components/Blocks"
import SectionHeader from "@/components/Section/Header"
import TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"

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

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

export { generateMetadata } from "@/utils/generateMetadata"

export default async function MyPages({
  params,
}: PageArgs<LangParams & { path: string[] }>) {
  setLang(params.lang)

  const accountPageRes = await serverClient().contentstack.accountPage.get()
  const intl = await getIntl()

  if (!accountPageRes) {
    return null
  }

  const { tracking, accountPage } = accountPageRes
  const { heading, preamble, content } = accountPage

  return (
    <>
      <main className={styles.blocks}>
        <SectionHeader
          title={heading}
          preamble={preamble}
          headingAs="h1"
          headingLevel="h1"
        />

        {content?.length ? (
          <Blocks blocks={content} />
        ) : (
          <p>{intl.formatMessage({ id: "No content published" })}</p>
        )}
      </main>
      <Suspense fallback={null}>
        <TrackingSDK pageData={tracking} />
      </Suspense>
    </>
  )
}