<script lang="ts" setup>
defineProps<{
  loading: boolean
  error: boolean
  empty: boolean
}>()

const emit = defineEmits(['reload'])

const handleReload = () => {
  emit('reload')
}
</script>

<template>
  <div :class="{'justify-center': (empty || error)}" class="container flex">
    <!-- 加载骨架 -->
    <div v-if="loading" class="h-56 w-full text-2xl font-bold">
      <slot name="skeleton">
        <div class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          <div v-for="index of 3" :key="index" class="h-56 animate-pulse rounded-2xl bg-gray-200"></div>
        </div>
      </slot>
    </div>
    <div v-else class="w-full">
      <!-- 错误处理 -->
      <div v-if="error" class="flex h-56 flex-col items-center justify-center" @click="handleReload">
        <span class="mb-4 text-8xl">❌</span>
        <span class="text-center text-2xl font-bold">载入错误</span>
      </div>
      <div v-else>
        <!-- 正式内容 -->
        <span v-if="empty" class="text-2xl font-bold">最近没有动态</span>
        <slot v-else name="default"/>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>