"use client"

import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

import Alert from "@/components/TempDesignSystem/Alert"

import HotelCardCarousel from "../../../HotelCardCarousel"
import HotelListItem from "../HotelListItem"

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

import { AlertTypeEnum } from "@/types/enums/alert"
import type { DestinationPagesHotelData } from "@/types/hotel"

interface HotelListContentProps {
  hotelsCount: number
  visibleHotels: DestinationPagesHotelData[]
}

export default function HotelListContent({
  hotelsCount,
  visibleHotels,
}: HotelListContentProps) {
  const intl = useIntl()
  const isMobile = useMediaQuery("(max-width: 949px)")

  if (hotelsCount === 0) {
    return (
      <Alert
        type={AlertTypeEnum.Info}
        heading={intl.formatMessage({
          defaultMessage: "No matching hotels found",
        })}
        text={intl.formatMessage({
          defaultMessage:
            "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
        })}
      />
    )
  }

  if (isMobile) {
    return <HotelCardCarousel visibleHotels={visibleHotels} />
  }

  return (
    <ul className={styles.hotelList}>
      {visibleHotels.map(({ hotel, url }) => (
        <li key={hotel.id}>
          <HotelListItem hotel={hotel} url={url} />
        </li>
      ))}
    </ul>
  )
}
