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

import SectionContainer from "@/components/Section/Container"
import Title from "@/components/TempDesignSystem/Text/Title"

import HotelListingItem from "./HotelListingItem"

import type { HotelListingProps } from "@/types/components/blocks/hotelListing"

export default async function HotelListing({
  heading,
  locationFilter,
  hotelsToInclude,
  contentType,
}: HotelListingProps) {
  const hotels = await getHotelsByCSFilter({
    locationFilter,
    hotelsToInclude: hotelsToInclude,
  })

  if (!hotels.length) {
    return null
  }

  return (
    <SectionContainer>
      <Title level="h4" as="h3" textTransform="capitalize">
        {heading}
      </Title>
      {hotels.map(({ url, ...data }) => (
        <HotelListingItem
          key={data.hotel.name}
          hotel={data.hotel}
          contentType={contentType}
          url={url}
        />
      ))}
    </SectionContainer>
  )
}