'use client'

import { useEffect } from 'react'
import { usePathname } from 'next/navigation'
import { useLanguage } from '@/lib/i18n'

const TITLE_KEYS: Record<string, string> = {
  '/settings/general': 'generalSettings.title',
  '/settings/ai': 'aiSettings.title',
  '/settings/billing': 'billing.title',
  '/settings/appearance': 'appearance.title',
  '/settings/profile': 'profile.title',
  '/settings/data': 'dataManagement.title',
  '/settings/published': 'settings.publishedTitle',
  '/settings/integrations': 'integrations.title',
  '/settings/mcp': 'mcpSettings.title',
  '/settings/about': 'about.title',
}

export function SettingsDocumentTitle() {
  const pathname = usePathname()
  const { t } = useLanguage()

  useEffect(() => {
    const key = Object.keys(TITLE_KEYS).find((href) => pathname === href || pathname.startsWith(`${href}/`))
    const section = key ? t(TITLE_KEYS[key]) : t('settings.title')
    document.title = `${section} — Memento`
  }, [pathname, t])

  return null
}