feat/sw-251 Filter hotels on select hotel page

components/HotelReservation/HotelCardListing/index.tsx

@@ -1,3 +1,7 @@
+"use client"
+import { useSearchParams } from "next/navigation"
+import { useMemo } from "react"
+
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import HotelCard from "../HotelCard"
@@ -7,12 +11,25 @@ import styles from "./hotelCardListing.module.css"
 import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
 export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
-  // TODO: filter with url params
+  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}>
-      {hotelData && hotelData.length ? (
-        hotelData.map((hotel) => (
+      {hotels.length ? (
+        hotels.map((hotel) => (
           <HotelCard key={hotel.hotelData.name} hotel={hotel} />
         ))
       ) : (