import {
AdvancedMarker,
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
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 (
<>
{pointsOfInterest.map((poi) => (
onActivePoiChange?.(poi.name ?? null)}
onMouseLeave={() => onActivePoiChange?.(null)}
onClick={() => toggleActivePoi(poi.name ?? "")}
>
{poi.name}
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
))}
)
}