import Blocks from "@/components/Blocks"
import Hero from "@/components/Hero"
import Sidebar from "@/components/Sidebar"
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 function StaticPage({
  content,
  tracking,
  pageType,
}: StaticPageProps) {
  const { blocks, hero_image, header } = 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.navigation_links ? (
                  <LinkChips chips={header.navigation_links} />
                ) : 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}>
            {blocks ? <Blocks blocks={blocks} /> : null}
          </main>

          {"sidebar" in content && content.sidebar?.length ? (
            <Sidebar blocks={content.sidebar} />
          ) : null}
        </div>
      </section>

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