import { cx } from "class-variance-authority"
import { notFound } from "next/navigation"
import { Suspense } from "react"

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

import { getCampaignPage } from "@/lib/trpc/memoizedRequests"

import Blocks from "./Blocks"
import CampaignPageSkeleton from "./CampaignPageSkeleton"

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

export default async function CampaignPage() {
  const pageData = await getCampaignPage()

  if (!pageData) {
    notFound()
  }

  const { campaignPage } = pageData
  const { heading, subheading, preamble, blocks } = campaignPage

  return (
    <>
      <Suspense fallback={<CampaignPageSkeleton />}>
        <div className={styles.pageContainer}>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
          <div className={styles.hero}>---PLACE FOR THE HERO---</div>
          <div className={styles.intro}>
            <div className={styles.headingWrapper}>
              <Typography variant="Title/lg">
                <h1 className={styles.heading}>{heading}</h1>
              </Typography>
              {subheading ? (
                <Typography variant="Title/Subtitle/lg">
                  <p>{subheading}</p>
                </Typography>
              ) : null}
            </div>
            <Typography variant="Body/Lead text">
              <div
                className={cx(styles.preamble, {
                  [styles.twoColumns]: preamble.is_two_columns,
                })}
              >
                <p>{preamble.first_column}</p>
                {preamble.is_two_columns && preamble.second_column ? (
                  <p className={styles.secondColumn}>
                    {preamble.second_column}
                  </p>
                ) : null}
              </div>
            </Typography>
          </div>
          {blocks ? <Blocks blocks={blocks} /> : null}
        </div>
      </Suspense>
      {/* <TrackingSDK pageData={tracking} /> */}
    </>
  )
}
