feat(SW-251): use response to render filters

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -1,23 +1,28 @@
-import { getIntl } from "@/i18n"
+"use client"
+
+import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-export default async function HotelFilter() {
-  const intl = await getIntl()
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export default function HotelFilter({ filters }: HotelFiltersProps) {
+  const intl = useIntl()
 
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {intl.formatMessage({ id: "Hotel facilities" })}
-      </div>
-      <div className={styles.facilities}>
-        {intl.formatMessage({ id: "Hotel surroundings" })}
-        {/* {filters.hotelSurroundings.map((surroundings) => (
-          <div key={surroundings} className={styles.filter}>
-            <input id={surroundings} name={surroundings} type="checkbox" />
-            <label htmlFor={surroundings}>{surroundings}</label>
-          </div>
-        ))} */}
+        <form>
+          <ul>
+            {filters.map((data) => (
+              <li key={data?.id} className={styles.filter}>
+                <input id={`${data?.id}`} name={data?.name} type="checkbox" />
+                <label htmlFor={`${data?.id}`}>{data?.name}</label>
+              </li>
+            ))}
+          </ul>
+        </form>
       </div>
     </aside>
   )