Use the interactive map on the map page

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+// TODO: This component is copied from
+// components/ContentType/HotelPage/Map/DynamicMap/Sidebar.
+// Look at that for inspiration on how to do the interaction with the map.
+
+export default function HotelListing({}: HotelListingProps) {
+  return <section>Hotel listing TBI</section>
+}

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+import { APIProvider } from "@vis.gl/react-google-maps"
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { selectHotel } from "@/constants/routes/hotelReservation"
+
+import { CloseIcon } from "@/components/Icons"
+import InteractiveMap from "@/components/Maps/InteractiveMap"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import HotelListing from "./HotelListing"
+
+import styles from "./selectHotelMap.module.css"
+
+import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+export default function SelectHotelMap({
+  apiKey,
+  coordinates,
+  pointsOfInterest,
+  mapId,
+}: SelectHotelMapProps) {
+  const lang = useLang()
+  const intl = useIntl()
+  const [activePoi, setActivePoi] = useState<string | null>(null)
+
+  const closeButton = (
+    <Button
+      asChild
+      intent="inverted"
+      size="small"
+      theme="base"
+      className={styles.closeButton}
+    >
+      <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
+        <CloseIcon color="burgundy" />
+        {intl.formatMessage({ id: "Close the map" })}
+      </Link>
+    </Button>
+  )
+  return (
+    <APIProvider apiKey={apiKey}>
+      <HotelListing />
+      <InteractiveMap
+        closeButton={closeButton}
+        coordinates={coordinates}
+        pointsOfInterest={pointsOfInterest}
+        activePoi={activePoi}
+        onActivePoiChange={setActivePoi}
+        mapId={mapId}
+      />
+    </APIProvider>
+  )
+}

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -0,0 +1,5 @@
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}