<template>
  <view class="empty-wrap">
    <text class="empty-icon">{{ icon }}</text>
    <text class="empty-title">{{ title }}</text>
    <text v-if="description" class="empty-desc">{{ description }}</text>
    <view v-if="actionText" class="empty-action" @tap="$emit('action')">
      {{ actionText }}
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  icon?: string
  title: string
  description?: string
  actionText?: string
}>()

defineEmits<{ action: [] }>()
</script>

<style lang="scss" scoped>
.empty-wrap {
  @include flex-center;
  flex-direction: column;
  padding: 80px 40px;
}

.empty-icon {
  font-size: var(--tk-font-hero);
  margin-bottom: 16px;
}

.empty-title {
  font-size: var(--tk-font-h2);
  color: $tx2;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  text-align: center;
}

.empty-action {
  @include btn-primary;
  margin-top: 32px;
  width: auto;
  padding: 0 48px;
}
</style>
