"use client" import { AdvancedMarker, AdvancedMarkerAnchorPoint, Map, type MapProps, useMap, } from "@vis.gl/react-google-maps" import { useIntl } from "react-intl" import { MinusIcon, PlusIcon } from "@/components/Icons" import PoiMarker from "@/components/Maps/Markers/Poi" import ScandicMarker from "@/components/Maps/Markers/Scandic" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./interactiveMap.module.css" import type { InteractiveMapProps } from "@/types/components/hotelPage/map/interactiveMap" export default function InteractiveMap({ coordinates, pointsOfInterest, activePoi, mapId, onActivePoiChange, closeButton, }: InteractiveMapProps) { const intl = useIntl() const map = useMap() const mapOptions: MapProps = { defaultZoom: 14, defaultCenter: coordinates, disableDefaultUI: true, clickableIcons: false, mapId, } function zoomIn() { const currentZoom = map && map.getZoom() if (currentZoom) { map.setZoom(currentZoom + 1) } } function zoomOut() { const currentZoom = map && map.getZoom() if (currentZoom) { map.setZoom(currentZoom - 1) } } function toggleActivePoi(poiName: string) { onActivePoiChange(activePoi === poiName ? null : poiName) } return (

{pointsOfInterest.map((poi) => ( onActivePoiChange(poi.name)} onMouseLeave={() => onActivePoiChange(null)} onClick={() => toggleActivePoi(poi.name)} > {poi.name} {poi.distance} km ))}

{closeButton}

) }