"use client"

import { useHotelsMapStore } from "@/stores/hotels-map"

import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
import HotelCardListing from "@/components/HotelReservation/HotelCardListing"

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

import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"

export default function HotelListing({ hotels }: HotelListingProps) {
  const { activeHotelPin } = useHotelsMapStore()
  return (
    <>
      <div className={styles.hotelListing}>
        <HotelCardListing
          hotelData={hotels}
          type={HotelCardListingTypeEnum.MapListing}
        />
      </div>
      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
        <HotelCardDialogListing hotels={hotels} />
      </div>
    </>
  )
}