// composables/usePageMeta.ts
import { watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useMainStore } from '@/stores/main'
import { useHead } from '@unhead/vue'

export function usePageMeta () {
  const route = useRoute()
  const mainStore = useMainStore()

  // ► Der aktuelle Page-Eintrag als computed
  const currentPage = computed(() => mainStore.getPageByLink(route.path))

  // ► Reagiere auf Route- oder Store-Änderungen
  watch(
    () => currentPage.value,       // Quelle
    (page) => {                    // Callback
      if (!page) return

      const metaTitle       = page.SEO?.pageTitle       ?? 'Standard Title'
      const metaDescription = page.SEO?.seoDescription  ?? 'Standard Description'
      const metaImage       = page.SEO?.seoImage?.url   ?? '/default-image.jpg'

      useHead({
        title: metaTitle,
        meta: [
          { name: 'description',          content: metaDescription },
          { property: 'og:title',         content: metaTitle },
          { property: 'og:description',   content: metaDescription },
          { property: 'og:image',         content: metaImage },
          { name: 'twitter:title',        content: metaTitle },
          { name: 'twitter:description',  content: metaDescription },
          { name: 'twitter:image',        content: metaImage }
        ]
      })
    },
    { immediate: true }            // Sofort beim ersten Aufruf ausführen
  )
}