<script setup lang="ts" generic="T">
import { NSpin } from 'naive-ui'

/** 移动端列表卡片化容器:接管加载 / 空态,卡片体由默认插槽渲染 */
const props = defineProps<{
  items: T[]
  loading?: boolean
  itemKey: (item: T) => string | number
  emptyText?: string
}>()
</script>

<template>
  <div class="flex flex-col gap-2.5">
    <div
      v-if="props.loading && !props.items.length"
      class="panel flex items-center justify-center py-10"
    >
      <NSpin size="small" />
    </div>
    <div v-else-if="!props.items.length" class="panel py-10 text-center text-[13px] text-ink-3">
      {{ props.emptyText ?? '暂无数据' }}
    </div>
    <div v-for="it in props.items" v-else :key="props.itemKey(it)" class="panel px-4 py-3">
      <slot :item="it"></slot>
    </div>
  </div>
</template>
