<template>
  <section class="ctms-state state state-empty">
    <el-icon v-if="false" class="ctms-state-icon state-icon"><Document /></el-icon>
    <h3 v-if="!description" class="ctms-state-title state-title">{{ title }}</h3>
    <p class="ctms-state-desc state-desc">{{ description || title }}</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-empty {
  padding: 28px 12px;
  gap: 8px;
}

.state-icon {
  color: var(--ctms-text-disabled);
  font-size: 18px;
  opacity: 0.35;
}

.state-title {
  color: var(--ctms-text-secondary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.state-desc {
  color: #8a97ab;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.state-action {
  margin-top: 4px;
}
</style>
