<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="person ?? {}">
            <template #empty>
              <div class="text-center py-12">
                <p class="text-gray-400 text-xl">内容加载中...</p>
              </div>
            </template>
          </ContentRenderer>
        </div>
      </div>
    </section>
    <!-- 媒体展示区域 -->
    <section class="py-20 px-4">
      <div class="mt-16 container mx-auto max-w-6xl">
        <h2 class="text-3xl font-orbitron font-bold mb-8 text-center">图集</h2>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          <div v-for="i in person?.gallery" :key="i" class="group relative overflow-hidden rounded-xl cursor-pointer">
            <img :src="i" :alt="`游戏截图 ${i}`"
              class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" />
            <div
              class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
              <Icon name="mdi:like"
                class="w-12 h-12 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

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

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

<style></style>