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

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

import { Section } from "@/components/Section"

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 (
    <Section>
      {heading ? (
        <Typography variant="Title/sm">
          <h3 className={styles.heading}>{heading}</h3>
        </Typography>
      ) : null}
      {hotels.map((hotelData) => (
        <HotelListingItem
          key={hotelData.hotel.name}
          hotelData={hotelData}
          contentType={contentType}
        />
      ))}
    </Section>
  )
}