<template>
  <section class="py-10">
    <a-typography-title :level="1" class="!mb-2">
      {{ title }}
    </a-typography-title>
    <a-typography-paragraph v-if="description" class="!text-gray-600 !mb-6">
      {{ description }}
    </a-typography-paragraph>

    <a-row v-if="links?.length" :gutter="[16, 16]">
      <a-col v-for="it in links" :key="it.to" :xs="24" :md="12" :lg="8">
        <a-card size="small" class="h-full">
          <NuxtLink class="text-base font-semibold" :to="it.to">
            {{ it.label }}
          </NuxtLink>
          <div v-if="it.desc" class="mt-2 text-sm text-gray-500">
            {{ it.desc }}
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-result
      v-if="showResult"
      class="mt-8"
      status="info"
      title="页面建设中"
      sub-title="该栏目正在完善中，可先通过导航进入其他栏目。"
    />
  </section>
</template>

<script setup lang="ts">
type LinkItem = { label: string; to: string; desc?: string }

withDefaults(
  defineProps<{
    title: string
    description?: string
    links?: LinkItem[]
    showResult?: boolean
  }>(),
  { description: '', links: () => [], showResult: true }
)
</script>

