"use client"

import { useMediaQuery } from "usehooks-ts"

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 { activeHotel } = useHotelsMapStore()
  const isMobile = useMediaQuery("(max-width: 767px)")

  return isMobile ? (
    <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
      <HotelCardDialogListing hotels={hotels} />
    </div>
  ) : (
    <div className={styles.hotelListing}>
      <HotelCardListing
        hotelData={hotels}
        type={HotelCardListingTypeEnum.MapListing}
      />
    </div>
  )
}
