import { Typography } from "@scandic-hotels/design-system/Typography"

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

import SectionContainer from "@/components/Section/Container"

import HotelListingItem from "./HotelListingItem"

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

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

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

  if (!hotels.length) {
    return null
  }

  return (
    <SectionContainer>
      <Typography variant="Title/sm">
        <h3 className={styles.heading}>{heading}</h3>
      </Typography>
      {hotels.map(({ url, hotel, additionalData }) => (
        <HotelListingItem
          key={hotel.name}
          hotel={hotel}
          additionalData={additionalData}
          contentType={contentType}
          url={url}
        />
      ))}
    </SectionContainer>
  )
}
