<template>
  <section class="BlogArticle content">
    <NuxtLink class="text inline-flex-row" to="/blog">
      <Icon name="ph:arrow-left-duotone"/>
      Zurück zur Übersicht
    </NuxtLink>

    <main v-if="article" class="article-content z-3">
      <div class="image z-2">
        <img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
      </div>
      <header>
        <div class="meta">
          <NuxtLink :to="`/blog/?category=${article.category}`">
            <span class="chip interactive"><BlogCategory :name="article.category as Category"/></span>
          </NuxtLink>
        </div>
        <h1 class="margin-top">{{ article.title }}</h1>
        <h2>{{ article.description }}</h2>
      </header>
      <div class="flex-col gap-default article-text">
        <ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
      </div>
    </main>
  </section>
</template>

<script setup lang="ts">
import type { Category } from '../../components/Blog/types'

const route = useRoute()

const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).where('date', '<', tomorrow(new Date())).first())

if (!article.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found',
  })
} else {
  useHead(article.value.head || {})
  useSeoMeta({
    ...(article.value.seo || {}),
    ogTitle: article.value.title,
    ogDescription: article.value.description,
    ogImage: article.value.image,
    ogImageAlt: article.value.description,
    ogUrl: `https://webfussel.de${article.value.path}`,
    twitterTitle: article.value.title,
    twitterDescription: article.value.description,
    twitterImage: article.value.image,
    twitterImageAlt: article.value.description,
    twitterUrl: `https://webfussel.de${article.value.path}`,
  })
}
</script>
