import { Suspense } from "react"

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

import Blocks from "@/components/Blocks"
import Hero from "@/components/Hero"
import MaxWidth from "@/components/MaxWidth"
import Sidebar from "@/components/Sidebar"
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"

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

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

  if (!loyaltyPageRes) {
    return null
  }

  const { tracking, loyaltyPage } = loyaltyPageRes
  const heroImage = loyaltyPage.heroImage
  return (
    <>
      <section className={styles.content}>
        {loyaltyPage.sidebar?.length ? (
          <Suspense fallback={<SidebarSkeleton />}>
            <Sidebar blocks={loyaltyPage.sidebar} />
          </Suspense>
        ) : null}

        <MaxWidth className={styles.blocks}>
          <header className={styles.header}>
            <Title as="h2">{loyaltyPage.heading}</Title>
            {loyaltyPage.preamble ? (
              <Preamble>{loyaltyPage.preamble}</Preamble>
            ) : null}

            {heroImage ? (
              <Hero
                alt={heroImage.meta.alt || heroImage.meta.caption || ""}
                src={heroImage.url}
              />
            ) : null}
          </header>
          {loyaltyPage.blocks.length ? (
            <Blocks blocks={loyaltyPage.blocks} />
          ) : null}
        </MaxWidth>
      </section>
      <TrackingSDK pageData={tracking} />
    </>
  )
}
