import { Suspense } from "react"

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

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

import Blocks from "@/components/Blocks"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import TrackingSDK from "@/components/TrackingSDK"

import { DestinationSearch } from "./DestinationSearch"
import HotelsSection from "./HotelsSection"
import OverviewMapContainer from "./OverviewMapContainer"

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

export default async function DestinationOverviewPage() {
  const pageData = await getDestinationOverviewPage()

  if (!pageData) {
    return null
  }

  const { tracking, destinationOverviewPage } = pageData

  return (
    <>
      <div className={styles.headerContainer}>
        <Typography variant="Title/lg">
          <h1 className={styles.heading}>{destinationOverviewPage.heading}</h1>
        </Typography>
        <div className={styles.destinationSearchContainer}>
          <DestinationSearch />
        </div>
      </div>
      <div className={styles.mapContainer}>
        <Suspense fallback={<SkeletonShimmer width="100%" height="100%" />}>
          <OverviewMapContainer />
        </Suspense>
      </div>
      <main className={styles.main}>
        <div className={styles.blocks}>
          <Blocks blocks={destinationOverviewPage.blocks} />
        </div>
      </main>
      <aside className={styles.hotelsAccordions}>
        <HotelsSection />
      </aside>
      <TrackingSDK pageData={tracking} />
    </>
  )
}

export function DestinationOverviewPageLoading() {
  return (
    <>
      <div className={styles.mapContainer}>
        <SkeletonShimmer width="100%" height="100%" />
      </div>
      <main className={styles.main}>
        <div className={styles.blocks}>
          <SkeletonShimmer width="100%" height="100%" />
        </div>
      </main>
      <aside className={styles.hotelsAccordions}>
        <SkeletonShimmer width="100%" height="100%" />
      </aside>
    </>
  )
}
