"use client"

import { useMediaQuery } from "usehooks-ts"

import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"

import HotelMapCard from "../../../HotelMapCard"

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

import type { DestinationMarker } from "@/types/components/maps/destinationMarkers"

interface ActiveMapCardProps {
  markers: DestinationMarker[]
}

export default function ActiveMapCard({ markers }: ActiveMapCardProps) {
  const { activeMarker } = useDestinationPageHotelsMapStore()
  const activeMapCardVisible = useMediaQuery("(max-width: 949px)")

  if (!activeMarker || !activeMapCardVisible) {
    return null
  }

  const activeHotel = markers.find((marker) => marker.id === activeMarker)

  if (!activeHotel) {
    return null
  }

  return (
    <HotelMapCard
      className={styles.activeMapCard}
      amenities={activeHotel.amenities}
      tripadvisorRating={activeHotel.tripadvisor}
      hotelName={activeHotel.name}
      image={activeHotel.image}
      url={activeHotel.url}
    />
  )
}
