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

import Blocks from "@/components/Blocks"
import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
import { FloatingBookingWidget } from "@/components/BookingWidget/FloatingBookingWidget"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"

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

import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
import { BlocksEnums } from "@/types/enums/blocks"

export default async function StartPage({
  booking,
}: {
  booking: BookingWidgetSearchData
}) {
  const content = await getStartPage()
  if (!content) {
    return null
  }

  const { header, blocks } = content.startPage

  return (
    <div className={styles.background}>
      <header className={styles.header}>
        <div className={styles.headerContent}>
          <Title color="white" textAlign="center">
            {header.heading}
          </Title>
          <FloatingBookingWidget booking={booking} />
        </div>
        {header.hero_image ? (
          <Image
            className={styles.topImage}
            alt={
              header.hero_image.meta.alt || header.hero_image.meta.caption || ""
            }
            src={header.hero_image.url}
            focalPoint={header.hero_image.focalPoint}
            sizes="100vw"
            fill
            priority
          />
        ) : null}
      </header>

      <main className={styles.main}>
        {blocks.map((block, index) => {
          if (block.typename === BlocksEnums.block.FullWidthCampaign) {
            return (
              <FullWidthCampaign
                key={block.typename}
                content={block.full_width_campaign}
              />
            )
          }

          return (
            <div key={`${block.typename}-${index}`} className={styles.section}>
              <Blocks blocks={[block]} />
            </div>
          )
        })}
      </main>
      <TrackingSDK pageData={content.tracking} />
    </div>
  )
}
