'use client'

import { useEffect } from 'react'

/** Keeps the tab title in the visitor's language: Next re-applies its default title while hydrating. */
export default function TitleSync() {
  useEffect(() => {
    const apply = () => {
      const html = document.documentElement
      const wanted = html.getAttribute(`data-title-${html.dataset.lang}`)
      if (wanted && document.title !== wanted) document.title = wanted
    }
    apply()
    const observer = new MutationObserver(apply)
    observer.observe(document.head, { childList: true, subtree: true, characterData: true })
    window.addEventListener('langchange', apply)
    return () => {
      observer.disconnect()
      window.removeEventListener('langchange', apply)
    }
  }, [])
  return null
}