"use client"
import { useSearchParams } from "next/navigation"
import { useMemo } from "react"

import Title from "@/components/TempDesignSystem/Text/Title"

import HotelCard from "../HotelCard"

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

import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"

export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
  const searchParams = useSearchParams()

  const hotels = useMemo(() => {
    const appliedFilters = searchParams.get("filters")?.split(",")
    if (!appliedFilters || appliedFilters.length === 0) return hotelData

    return hotelData.filter((hotel) =>
      appliedFilters.every((appliedFilterId) =>
        hotel.hotelData.detailedFacilities.some(
          (facility) => facility.id.toString() === appliedFilterId
        )
      )
    )
  }, [searchParams, hotelData])

  return (
    <section className={styles.hotelCards}>
      {hotels.length ? (
        hotels.map((hotel) => (
          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
        ))
      ) : (
        <Title>No hotels found</Title>
      )}
    </section>
  )
}
