"use client"

import { useRef } from "react"
import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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

import useStickyPosition from "@/hooks/useStickyPosition"

import { getHeadingText } from "../utils"

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

interface SidebarContentWrapperProps extends React.PropsWithChildren {
  location: string
  preamble: string
}

export default function SidebarContentWrapper({
  location,
  preamble,
  children,
}: SidebarContentWrapperProps) {
  const intl = useIntl()
  const sidebarRef = useRef<HTMLDivElement>(null)
  useStickyPosition({
    ref: sidebarRef,
    name: StickyElementNameEnum.DESTINATION_SIDEBAR,
  })
  const { activeFilters, allFilters } = useDestinationDataStore((state) => ({
    activeFilters: state.activeFilters,
    allFilters: state.allFilters,
  }))

  return (
    <div ref={sidebarRef} className={styles.sidebarContent}>
      <Typography variant="Title/md">
        <h1 className={styles.heading}>
          {getHeadingText(intl, location, allFilters, activeFilters[0])}
        </h1>
      </Typography>
      {!activeFilters.length && (
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>{preamble}</p>
        </Typography>
      )}
      {children}
    </div>
  )
}
