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

{hotelPins.map((pin) => { const isActiveOrHovered = activeHotelPin === pin.name || hoveredHotelPin === pin.name return ( handleHover(pin.name)} onMouseLeave={() => handleHover(null)} onClick={() => toggleActiveHotelPin(pin.name)} >

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

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

) } export default memo(HotelListingMapContent)