import stringify from "json-stable-stringify-without-jsonify"
import { Suspense } from "react"

import SelectRate from "@/components/HotelReservation/SelectRate"
import { HotelInfoCardSkeleton } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"

import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import type { LangParams, PageArgs } from "@/types/params"

export default async function SelectRatePage({
  params,
  searchParams,
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
  const suspenseKey = stringify(searchParams)

  return (
    <Suspense
      key={suspenseKey}
      fallback={
        <>
          <HotelInfoCardSkeleton />
          <RoomsContainerSkeleton />
        </>
      }
    >
      <SelectRate params={params} searchParams={searchParams} />
    </Suspense>
  )
}