<script setup>
let resizeObserver = null

/**
 * 상단 크롬(어나운스 바·헤더) 높이를 CSS 변수로 반영한다.
 * @returns {void}
 */
const syncTopChromeHeight = () => {
  if (!import.meta.client) {
    return
  }

  const chrome = document.querySelector('.site-top-chrome')
  const height = chrome instanceof HTMLElement ? chrome.offsetHeight : 57
  document.documentElement.style.setProperty('--site-top-chrome-height', `${height}px`)
}

onMounted(() => {
  syncTopChromeHeight()
  window.addEventListener('resize', syncTopChromeHeight)

  const chrome = document.querySelector('.site-top-chrome')
  if (chrome instanceof HTMLElement && typeof ResizeObserver !== 'undefined') {
    resizeObserver = new ResizeObserver(() => {
      syncTopChromeHeight()
    })
    resizeObserver.observe(chrome)
  }
})

onBeforeUnmount(() => {
  if (!import.meta.client) {
    return
  }

  window.removeEventListener('resize', syncTopChromeHeight)
  resizeObserver?.disconnect()
  resizeObserver = null
  document.documentElement.style.removeProperty('--site-top-chrome-height')
})
</script>

<template>
  <div class="site-top-chrome sticky top-0 z-20 shrink-0">
    <SiteAnnouncementBar />
    <slot />
  </div>
</template>
