"use client"

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,
  activeHotelPin,
  setActiveHotelPin,
}: HotelListingProps) {
  return (
    <>
      <div className={styles.hotelListing}>
        <HotelCardListing
          hotelData={hotels}
          type={HotelCardListingTypeEnum.MapListing}
          activeCard={activeHotelPin}
          onHotelCardHover={setActiveHotelPin}
        />
      </div>
      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
        <HotelCardDialogListing
          hotels={hotels}
          activeCard={activeHotelPin}
          onActiveCardChange={setActiveHotelPin}
        />
      </div>
    </>
  )
}