<template>
  <!-- 活动模块 -->
  <UPageSection title="校友活动" class="bg-gray-100">
    <div class="grid md:grid-cols-3 gap-6">
      <div
        v-for="event in events"
        :key="event.id"
        class="bg-white shadow rounded-xl"
      >
        <img :src="event.cover" :alt="event.title" class="rounded-xl" />
        <div class="p-6">
          <h4 class="font-semibold text-lg mb-2">{{ event.title }}</h4>
          <p class="text-sm text-gray-600 mb-1">
            日期：{{ useChineseDateFormat(event.date) }}
          </p>
          <p class="text-sm text-gray-600 mb-4">地点：{{ event.location }}</p>
          <!-- <a
            :href="event.path"
            class="bg-primary text-white px-5 py-2 rounded-lg hover:opacity-90"
            >阅读详情</a
          > -->
          <UButton label="阅读详情" :to="event.path" trailing-icon="mdi:glasses"/>
        </div>
      </div>
    </div>
  </UPageSection>
</template>

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

<style></style>
