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 styles from "./page.module.css"

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

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

export default async function MyPages({}: PageArgs<
  LangParams & { path: string[] }
>) {
  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>
    </>
  )
}