import Link from "next/link"
import { Suspense } from "react"

import Blocks from "@/components/Blocks"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import Hero from "@/components/Hero"
import MeetingPackageWidget from "@/components/MeetingPackageWidget"
import Sidebar from "@/components/Sidebar"
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
import Button from "@/components/TempDesignSystem/Button"
import LinkChips from "@/components/TempDesignSystem/LinkChips"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"

import { staticPageVariants } from "./variants"

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

import type { StaticPageProps } from "./staticPage"

export default async function StaticPage({
  content,
  tracking,
  pageType,
}: StaticPageProps) {
  const { blocks, hero_image, header, meeting_package } = content

  return (
    <>
      <section className={staticPageVariants({ pageType })}>
        <header className={styles.header}>
          <div className={styles.headerContent}>
            {header ? (
              <>
                <div className={styles.headerIntro}>
                  <Title as="h2">{header.heading}</Title>
                  <Preamble>{header.preamble}</Preamble>
                </div>
                {header.top_primary_button?.url ? (
                  <Button
                    size="medium"
                    intent="tertiary"
                    theme="base"
                    asChild
                    className={styles.button}
                  >
                    <Link href={header.top_primary_button.url}>
                      {header.top_primary_button.title}
                    </Link>
                  </Button>
                ) : null}
                {header.navigation_links ? (
                  <LinkChips chips={header.navigation_links} />
                ) : null}
                {"dynamic_content" in header &&
                header.dynamic_content !== null &&
                header.dynamic_content !== undefined ? (
                  <HeaderDynamicContent {...header.dynamic_content} />
                ) : null}
              </>
            ) : null}
          </div>
        </header>

        {hero_image ? (
          <div className={styles.heroContainer}>
            <Hero
              alt={hero_image.meta.alt || hero_image.meta.caption || ""}
              src={hero_image.url}
              focalPoint={hero_image.focalPoint}
            />
          </div>
        ) : null}

        <div className={styles.contentContainer}>
          <main className={styles.mainContent}>
            {pageType === "collection" && meeting_package?.show_widget && (
              <MeetingPackageWidget
                destination={meeting_package.location}
                className={styles.meetingPackageWidget}
              />
            )}
            {blocks ? <Blocks blocks={blocks} /> : null}
          </main>

          {"sidebar" in content && content.sidebar?.length ? (
            <Suspense fallback={<SidebarSkeleton />}>
              <Sidebar blocks={content.sidebar} />
            </Suspense>
          ) : null}
        </div>
      </section>
      <TrackingSDK pageData={tracking} />
    </>
  )
}
