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

import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"

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

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

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

export default async function MyPages() {
  const caller = await serverClient()
  const accountPageRes = await caller.contentstack.accountPage.get()
  const intl = await getIntl()

  if (!accountPageRes) {
    return null
  }

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

  return (
    <>
      <main className={styles.blocks}>
        {hero_image_active ? (
          <header className={styles.header}>
            <Typography variant="Title/lg">
              <h1 className={styles.heading}>{heading}</h1>
            </Typography>
            {hero_image ? (
              <Image
                className={styles.image}
                alt={hero_image.meta.alt || hero_image.meta.caption || ""}
                src={hero_image.url}
                focalPoint={hero_image.focalPoint}
                dimensions={hero_image.dimensions}
                sizes="100vw"
                fill
                priority
              />
            ) : null}
          </header>
        ) : (
          <SectionHeader
            heading={heading}
            preamble={preamble}
            headingLevel="h1"
          />
        )}

        {content?.length ? (
          <Blocks blocks={content} />
        ) : (
          <p>
            {intl.formatMessage({
              id: "myPages.missingContent",
              defaultMessage: "No content published",
            })}
          </p>
        )}
      </main>
      <TrackingSDK pageData={tracking} />
    </>
  )
}