feat: pass filters as prop

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -4,53 +4,39 @@ import { getIntl } from "@/i18n"
 
 import styles from "./hotelFilter.module.css"
 
-export default async function HotelFilter() {
+import { HotelFilterProps } from "@/types/components/hotelReservation/selectHotel/hotelFilterProps"
+
+export default async function HotelFilter({ filter }: HotelFilterProps) {
   const { formatMessage } = await getIntl()
 
-  const filters = await serverClient().hotel.getFilters({
-    hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
-  })
-
-  const hotelFilters = filters.flatMap((filter) => filter.filter)
-
   return (
     <aside className={styles.container}>
       <div className={styles.facilities}>
         {formatMessage({ id: "Room facilities" })}
-        {hotelFilters.map((data) =>
-          data.roomFacilities.map((roomFilter) => (
-            <div key={roomFilter} className={styles.filter}>
-              <input id={roomFilter} name={roomFilter} type="checkbox" />
-              <label htmlFor={roomFilter}>{roomFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.roomFacilities.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel facilities" })}
-        {hotelFilters.map((data) =>
-          data.hotelFacilities.map((hotelFilter) => (
-            <div key={hotelFilter} className={styles.filter}>
-              <input id={hotelFilter} name={hotelFilter} type="checkbox" />
-              <label htmlFor={hotelFilter}>{hotelFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.hotelFacilities.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
       <div className={styles.facilities}>
         {formatMessage({ id: "Hotel surroundings" })}
-        {hotelFilters.map((data) =>
-          data.hotelSurroundings.map((surroundingsFilter) => (
-            <div key={surroundingsFilter} className={styles.filter}>
-              <input
-                id={surroundingsFilter}
-                name={surroundingsFilter}
-                type="checkbox"
-              />
-              <label htmlFor={surroundingsFilter}>{surroundingsFilter}</label>
-            </div>
-          ))
-        )}
+        {filter[0].filter.hotelSurroundings.map((filter, index) => (
+          <div key={index} className={styles.filter}>
+            <input id={filter} name={filter} type="checkbox" />
+            <label htmlFor={filter}>{filter}</label>
+          </div>
+        ))}
       </div>
     </aside>
   )