<template>
  <section class="ctms-state state state-empty">
    <el-icon class="ctms-state-icon state-icon"><Document /></el-icon>
    <h3 class="ctms-state-title state-title">{{ title }}</h3>
    <p v-if="description" class="ctms-state-desc state-desc">{{ description }}</p>
    <div v-if="$slots.action" class="ctms-state-action state-action">
      <slot name="action" />
    </div>
  </section>
</template>

<script setup lang="ts">
import { Document } from "@element-plus/icons-vue";
import { TEXT } from "../locales";

withDefaults(
  defineProps<{
    title?: string;
    description?: string;
  }>(),
  {
    title: TEXT.common.empty.noData,
    description: "",
  }
);
</script>

<style scoped>
.state-icon {
  color: var(--ctms-text-disabled);
}

.state-title {
  color: var(--ctms-text-regular);
}

.state-desc {
  color: var(--ctms-text-secondary);
}
</style>
