<script setup lang="ts">
defineProps<{
  title: string
  total: number
  description: string
  to: string
}>()
</script>

<template>
  <section class="rounded-2xl border border-default/80 bg-elevated/25 p-5 shadow-sm sm:p-6">
    <div class="flex items-start justify-between gap-4">
      <div class="min-w-0">
        <h2 class="text-base font-semibold text-highlighted">
          {{ title }}
        </h2>
        <p class="mt-1 text-sm text-muted">
          共 {{ total }} 条
        </p>
      </div>
    </div>

    <p class="mt-4 text-sm leading-relaxed text-muted">
      {{ description }}
    </p>

    <div class="mt-4 space-y-2">
      <slot name="preview">
        <div class="rounded-lg border border-dashed border-default px-3 py-2 text-sm text-muted">
          暂无可预览内容
        </div>
      </slot>
    </div>

    <div class="mt-4">
      <UButton
        :to="to"
        variant="outline"
        size="sm"
        icon="i-lucide-arrow-right"
        trailing
      >
        查看全部
      </UButton>
    </div>
  </section>
</template>
