import {
AdvancedMarker,
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import HotelMarkerByType from "../../Markers"
import PoiMarker from "../../Markers/Poi"
import styles from "./poiMapMarkers.module.css"
import type { PoiMapMarkersProps } from "@/types/hotel"
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,
}
)}
))}
)
}