import stringify from "json-stable-stringify-without-jsonify"
import { notFound } from "next/navigation"
import { Suspense } from "react"

import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
import { MapContainer } from "@/components/MapContainer"
import { parseSelectHotelSearchParams } from "@/utils/url"

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

import type { LangParams, NextSearchParams, PageArgs } from "@/types/params"

export default async function SelectHotelMapPage(
  props: PageArgs<LangParams, NextSearchParams>
) {
  const searchParams = await props.searchParams
  const suspenseKey = stringify(searchParams)

  const booking = parseSelectHotelSearchParams(searchParams)

  if (!booking) return notFound()

  return (
    <div className={styles.main}>
      <MapContainer>
        <Suspense
          key={suspenseKey}
          fallback={<SelectHotelMapContainerSkeleton />}
        >
          <SelectHotelMapContainer booking={booking} />
        </Suspense>
      </MapContainer>
    </div>
  )
}
