import Title from "@scandic-hotels/design-system/Title"

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

import MaxWidth from "@/components/MaxWidth"
import TrackingSDK from "@/components/TrackingSDK"
import LinkToOverview from "@/components/Webviews/LinkToOverview"

import Blocks from "./Blocks"

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

export default async function AboutScandicFriends() {
  const caller = await serverClient()
  const loyaltyPageRes = await caller.contentstack.loyaltyPage.get()

  if (!loyaltyPageRes) {
    return null
  }

  const { tracking, loyaltyPage } = loyaltyPageRes
  return (
    <>
      <section className={styles.content}>
        <LinkToOverview />
        <MaxWidth tag="main" className={styles.blocks}>
          <Title>{loyaltyPage.heading}</Title>
          <Blocks blocks={loyaltyPage.blocks} />
        </MaxWidth>
      </section>

      <TrackingSDK pageData={tracking} />
    </>
  )
}