<script setup>
const { data: posts } = await useFetch('/api/posts', {
  default: () => []
})

/**
 * 날짜 표시 형식 변환
 * @param {string | null} value - ISO 날짜 문자열
 * @returns {string} 화면 표시 날짜
 */
const formatPostDate = (value) => {
  if (!value) {
    return ''
  }

  const date = new Date(value)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')

  return `${year}.${month}.${day}`
}

const postCards = computed(() => posts.value.map((post) => ({
  title: post.title,
  excerpt: post.excerpt,
  tag: post.tags?.[0]?.toUpperCase() || 'POST',
  publishedAt: formatPostDate(post.publishedAt),
  to: `/post/${post.slug}`
})))
</script>

<template>
  <MainColumn>
    <section class="posts-index site-section">
      <div class="posts-index__header site-section-header">
        <p class="posts-index__eyebrow text-xs font-semibold uppercase text-muted">
          Posts
        </p>
        <h1 class="posts-index__title mt-3 text-4xl font-semibold leading-tight">
          게시물
        </h1>
      </div>
    </section>

    <PostCard v-for="post in postCards" :key="post.to" :post="post" />
  </MainColumn>
</template>
