<script setup>
definePageMeta({
  layout: 'post'
})

const route = useRoute()
const slug = computed(() => String(route.params.slug || ''))

const { data: post } = await useFetch(() => `/api/posts/${slug.value}`)

if (!post.value) {
  throw createError({
    statusCode: 404,
    statusMessage: '게시물을 찾을 수 없습니다.'
  })
}

const postTag = computed(() => post.value.tags?.[0]?.toUpperCase() || 'POST')
</script>

<template>
  <ContentRenderer>
    <ProseHeaderCard>
      <p class="post-detail__eyebrow text-sm uppercase text-white/70">
        {{ postTag }}
      </p>
      <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
        {{ post.title }}
      </h1>
    </ProseHeaderCard>

    <p class="post-detail__content whitespace-pre-line">
      {{ post.content }}
    </p>
  </ContentRenderer>
</template>
