<template>
  <view class="empty-state flex flex-col items-center justify-center py-16 px-6">
    <view class="empty-icon w-16 h-16 rounded-full flex items-center justify-center mb-4">
      <text class="uni-icons text-3xl" :class="icon || 'uniui-info-filled'"></text>
    </view>
    <text class="empty-text text-sm font-medium">{{ text || '暂无数据' }}</text>
    <slot />
  </view>
</template>

<script setup lang="ts">
interface Props {
  icon?: string
  text?: string
}

withDefaults(defineProps<Props>(), {
  icon: 'uniui-info-filled',
  text: '暂无数据'
})
</script>

<style scoped>
.empty-state {
  min-height: 200px;
}
.empty-icon {
  background-color: rgba(164, 216, 152, 0.16);
  color: rgba(54, 143, 111, 0.55);
}
.empty-text {
  color: #6b7280;
}
</style>
