fix(SW-1111) refactor state of active hotel card and hotel pin

components/HotelReservation/HotelCardListing/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
@@ -24,14 +25,13 @@ import { AlertTypeEnum } from "@/types/enums/alert"
 export default function HotelCardListing({
   hotelData,
   type = HotelCardListingTypeEnum.PageListing,
-  activeCard,
-  onHotelCardHover,
 }: HotelCardListingProps) {
   const searchParams = useSearchParams()
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
   const intl = useIntl()
+  const { activeHotelCard } = useHotelsMapStore()
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -111,13 +111,16 @@ export default function HotelCardListing({
         hotels.map((hotel) => (
           <div
             key={hotel.hotelData.operaId}
-            data-active={hotel.hotelData.name === activeCard ? "true" : "false"}
+            data-active={
+              hotel.hotelData.name === activeHotelCard ? "true" : "false"
+            }
           >
             <HotelCard
               hotel={hotel}
               type={type}
-              state={hotel.hotelData.name === activeCard ? "active" : "default"}
-              onHotelCardHover={onHotelCardHover}
+              state={
+                hotel.hotelData.name === activeHotelCard ? "active" : "default"
+              }
             />
           </div>
         ))