<template>
  <div>
    <section class="py-20 px-4">
      <div class="container mx-auto max-w-6xl">
        <!-- 内容渲染器 -->
        <div class="prose prose-invert prose-lg max-w-none">
          <ContentRenderer :value="n ?? {}">
            <template #empty>
              <div class="text-center py-12">
                <p class="text-gray-400 text-xl">内容加载中...</p>
              </div>
            </template>
          </ContentRenderer>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute()
const { data: n } = await useAsyncData('new-detail', () =>
  queryCollection('news')
    .path(`/news/${route.params.slug}`)
    .first()
)

useHead({
  title: n.value?.title
})
</script>

<style></style>