web/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx

import {
  AdvancedMarker,
  AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import HotelMarkerByType from "../../Markers"
import PoiMarker from "../../Markers/Poi"

import styles from "./poiMapMarkers.module.css"

import type { PointOfInterest } from "@scandic-hotels/trpc/types/hotel"
import type { MarkerInfo } from "@scandic-hotels/trpc/types/marker"

export type PoiMapMarkersProps = {
  activePoi?: string | null
  coordinates: { lat: number; lng: number }
  onActivePoiChange?: (poiName: string | null) => void
  pointsOfInterest: PointOfInterest[]
  markerInfo: MarkerInfo
}

export default function PoiMapMarkers({
  coordinates,
  pointsOfInterest,
  onActivePoiChange,
  activePoi,
  markerInfo,
}: PoiMapMarkersProps) {
  const intl = useIntl()

  function toggleActivePoi(poiName: string) {
    onActivePoiChange?.(activePoi === poiName ? null : poiName)
  }
  return (
    <>
      <AdvancedMarker position={coordinates} zIndex={1}>
        <HotelMarkerByType
          hotelId={markerInfo.hotelId}
          hotelType={markerInfo.hotelType}
        />
      </AdvancedMarker>

      {pointsOfInterest.map((poi) => (
        <AdvancedMarker
          key={poi.name + poi.categoryName}
          className={styles.advancedMarker}
          position={poi.coordinates}
          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
          zIndex={activePoi === poi.name ? 2 : 0}
          onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
          onMouseLeave={() => onActivePoiChange?.(null)}
          onClick={() => toggleActivePoi(poi.name ?? "")}
        >
          <span
            className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}
          >
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
              size={activePoi === poi.name ? "large" : "small"}
            />
            <span className={styles.poiLabel}>
              <Typography variant="Body/Paragraph/mdRegular">
                <span>{poi.name}</span>
              </Typography>
              <Typography
                variant="Body/Supporting text (caption)/smRegular"
                className={styles.distance}
              >
                <span>
                  {intl.formatMessage(
                    {
                      defaultMessage: "{distanceInKm} km",
                    },
                    {
                      distanceInKm: poi.distance,
                    }
                  )}
                </span>
              </Typography>
            </span>
          </span>
        </AdvancedMarker>
      ))}
    </>
  )
}