<template>
  <div>
    <!-- 新闻公告 -->
    <section id="news" class="max-w-6xl mx-auto py-16 px-4">
      <h2 class="text-2xl font-bold text-gray-900 mb-6">最新新闻与公告</h2>
      <div class="grid md:grid-cols-3 gap-6">
        <article v-for="n in news" :key="n.id" @click="jumpToNewsDetail(n.stem)"
          class="bg-secondary/10 rounded-xl shadow cursor-pointer transition transform hover:-translate-y-1 hover:scale-105 hover:shadow-xl duration-300 ease-in-out">
          <img class="rounded-xl" :src="n.cover" :alt="n.title">
          <div class="p-5">
            <h3 class="font-semibold mb-2">{{ n.title }}</h3>
            <div class="px-1 w-max bg-secondary/25 border-secondary border-2 rounded-xl text-primary text-sm mb-2">{{
              useChineseDateFormat(n.date) }}</div>
            <p class="text-sm text-gray-600">{{ n.description }}</p>
          </div>
        </article>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
const { data: news } = await useAsyncData('news', () =>
  queryCollection('news')
    .order("date", "DESC")
    .limit(3)
    .all()
)

const router = useRouter();

const jumpToNewsDetail = (newsPath: string) => {
  router.push(newsPath);
}
</script>

<style></style>