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

import Body from "@/components/TempDesignSystem/Text/Body"

import HotelMarker from "../../Markers/Hotel"

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

import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"

export default function HotelListingMapContent({
  activeHotelPin,
  hotelPins,
}: {
  activeHotelPin?: HotelPin["name"] | null
  hotelPins: HotelPin[]
}) {
  return (
    <div>
      {hotelPins.map((pin) => (
        <AdvancedMarker
          key={pin.name}
          className={styles.advancedMarker}
          position={pin.coordinates}
          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
          zIndex={activeHotelPin === pin.name ? 2 : 0}
        >
          <span
            className={`${styles.pin} ${activeHotelPin === pin.name ? styles.active : ""}`}
          >
            <span className={styles.pinIcon}>
              <HotelMarker width={16} />
            </span>
            <Body asChild>
              <span>
                {pin.price} {pin.currency}
              </span>
            </Body>
          </span>
        </AdvancedMarker>
      ))}
    </div>
  )
}
