import { AdvancedMarker, AdvancedMarkerAnchorPoint, } from "@vis.gl/react-google-maps" import { useRef, useState } from "react" import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog" import Body from "@/components/TempDesignSystem/Text/Body" import useClickOutside from "@/hooks/useClickOutside" import HotelMarker from "../../Markers/HotelMarker" import styles from "./hotelListingMapContent.module.css" import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map" export default function HotelListingMapContent({ activeHotelPin, hotelPins, onActiveHotelPinChange, }: HotelListingMapContentProps) { const [hoveredHotelPin, setHoveredHotelPin] = useState(null) const dialogRef = useRef(null) function toggleActiveHotelPin(pinName: string | null) { if (onActiveHotelPinChange) { onActiveHotelPinChange(activeHotelPin === pinName ? null : pinName) setHoveredHotelPin(null) } } function isPinActiveOrHovered(pinName: string) { return activeHotelPin === pinName || hoveredHotelPin === pinName } useClickOutside(dialogRef, isPinActiveOrHovered(activeHotelPin ?? ""), () => { toggleActiveHotelPin(null) }) return (

{hotelPins.map((pin) => { const isActiveOrHovered = isPinActiveOrHovered(pin.name) return ( setHoveredHotelPin(pin.name)} onMouseLeave={() => setHoveredHotelPin(null)} onClick={() => { toggleActiveHotelPin( activeHotelPin === pin.name ? null : pin.name ) }} >

void }) => { event.stopPropagation() if (activeHotelPin === pin.name) { toggleActiveHotelPin(null) } }} data={pin} />

{pin.memberPrice} {pin.currency} ) })}

) }