import { Suspense } from "react"

import SelectHotel from "@/components/HotelReservation/SelectHotel"
import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton"

import type { AlternativeHotelsSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
import type { LangParams, PageArgs } from "@/types/params"

export default async function AlternativeHotelsPage({
  params,
  searchParams,
}: PageArgs<LangParams, AlternativeHotelsSearchParams>) {
  const roomKey = Object.keys(searchParams)
    .filter((key) => key.startsWith("room["))
    .map((key) => searchParams[key])
    .join("-")

  return (
    <Suspense
      key={`${searchParams.hotel}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
      fallback={<SelectHotelSkeleton />}
    >
      <SelectHotel
        params={params}
        searchParams={searchParams}
        isAlternativeHotels
      />
    </Suspense>
  )
}
