Adapt the interactive map for reuse

components/Maps/InteractiveMap/index.tsx

@@ -8,10 +8,7 @@ import {
 } from "@vis.gl/react-google-maps"
 import { useIntl } from "react-intl"
 
-import useHotelPageStore from "@/stores/hotel-page"
-
 import { MinusIcon, PlusIcon } from "@/components/Icons"
-import CloseLargeIcon from "@/components/Icons/CloseLarge"
 import PoiMarker from "@/components/Maps/Markers/Poi"
 import ScandicMarker from "@/components/Maps/Markers/Scandic"
 import Button from "@/components/TempDesignSystem/Button"
@@ -20,7 +17,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./interactiveMap.module.css"
 
-import type { MapContentProps } from "@/types/components/hotelPage/map/mapContent"
+import type { InteractiveMapProps } from "@/types/components/hotelPage/map/interactiveMap"
 
 export default function InteractiveMap({
   coordinates,
@@ -28,9 +25,9 @@ export default function InteractiveMap({
   activePoi,
   mapId,
   onActivePoiChange,
-}: MapContentProps) {
+  closeButton,
+}: InteractiveMapProps) {
   const intl = useIntl()
-  const { closeDynamicMap } = useHotelPageStore()
   const map = useMap()
 
   const mapOptions: MapProps = {
@@ -98,17 +95,7 @@ export default function InteractiveMap({
         ))}
       </Map>
       <div className={styles.ctaButtons}>
-        <Button
-          theme="base"
-          intent="inverted"
-          variant="icon"
-          size="small"
-          className={styles.closeButton}
-          onClick={closeDynamicMap}
-        >
-          <CloseLargeIcon color="burgundy" />
-          <span>{intl.formatMessage({ id: "Close the map" })}</span>
-        </Button>
+        {closeButton}
         <div className={styles.zoomButtons}>
           <Button
             theme="base"