web/apps/scandic-web/components/Blocks/CampaignHotelListing/index.tsx

import { Suspense } from "react"

import {
  type HotelSortItem,
  HotelSortOption,
} from "@scandic-hotels/trpc/types/hotel"

import {
  getHotelFilters,
  getHotelsByCSFilter,
} from "@/lib/trpc/memoizedRequests"

import { getIntl } from "@/i18n"
import HotelListingDataProvider from "@/providers/HotelListingDataProvider"

import CampaignHotelListingSkeleton from "./CampaignHotelListingSkeleton"
import CampaignHotelListingClient from "./Client"

interface CampaignHotelListingProps {
  heading: string
  preamble?: string | null
  hotelIds: string[]
  bookingCode?: string | null
  visibleCountMobile?: 3 | 6
  visibleCountDesktop?: 3 | 6
  isMainBlock?: boolean
}

export default async function CampaignHotelListing({
  heading,
  preamble,
  hotelIds,
  bookingCode,
  visibleCountMobile = 3,
  visibleCountDesktop = 6,
  isMainBlock = false,
}: CampaignHotelListingProps) {
  const intl = await getIntl()
  const hotels = await getHotelsByCSFilter({ hotelsToInclude: hotelIds })

  if (!hotels.length) {
    return null
  }

  const allFilters = await getHotelFilters()
  const sortItems: HotelSortItem[] = [
    {
      label: intl.formatMessage({
        id: "common.name",
        defaultMessage: "Name",
      }),
      value: HotelSortOption.Name,
    },
    {
      label: intl.formatMessage({
        id: "common.tripAdvisorRating",
        defaultMessage: "Tripadvisor rating",
      }),
      value: HotelSortOption.TripAdvisorRating,
    },
  ]

  return (
    <Suspense fallback={<CampaignHotelListingSkeleton />}>
      <HotelListingDataProvider
        allHotels={hotels}
        allFilters={allFilters}
        sortItems={sortItems}
      >
        <CampaignHotelListingClient
          heading={heading}
          preamble={preamble}
          bookingCode={bookingCode}
          visibleCountMobile={visibleCountMobile}
          visibleCountDesktop={visibleCountDesktop}
          isMainBlock={isMainBlock}
        />
      </HotelListingDataProvider>
    </Suspense>
  )
}