"use client"

import { PropsWithChildren, useRef } from "react"

import { StickyElementNameEnum } from "@/stores/sticky-position"

import useStickyPosition from "@/hooks/useStickyPosition"

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

export default function MapWithCard({ children }: PropsWithChildren) {
  const mapWithCardRef = useRef<HTMLDivElement>(null)
  useStickyPosition({
    ref: mapWithCardRef,
    name: StickyElementNameEnum.HOTEL_STATIC_MAP,
    group: "hotelPage",
  })

  return (
    <div ref={mapWithCardRef} className={styles.mapWithCard}>
      {children}
    </div>
  )
}
