"use client"

import { useRef } from "react"

import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"

import MeetingPackageWidget from "@/components/MeetingPackageWidget"

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

interface StickyMeetingPackageWidgetProps {
  destination?: string
}

export default function StickyMeetingPackageWidget({
  destination,
}: StickyMeetingPackageWidgetProps) {
  const ref = useRef<HTMLDivElement>(null)
  useStickyPosition({
    ref,
    name: StickyElementNameEnum.MEETING_PACKAGE_WIDGET,
  })

  return (
    <div ref={ref} className={styles.wrapper}>
      <MeetingPackageWidget destination={destination} />
    </div>
  )
}