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

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

import MaxWidth from "@/components/MaxWidth"

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}>
        <MaxWidth tag="main" className={styles.blocks}>
          <Typography variant="Title/md" className={styles.heading}>
            <h1>{loyaltyPage.heading}</h1>
          </Typography>
          <Blocks blocks={loyaltyPage.blocks} />
        </MaxWidth>
      </section>

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