<template>
  <div class="state state-error">
    <el-icon class="state-icon"><CircleClose /></el-icon>
    <div class="state-title">{{ title }}</div>
    <div v-if="description" class="state-desc">{{ description }}</div>
    <div v-if="$slots.action" class="state-action">
      <slot name="action" />
    </div>
  </div>
</template>

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

withDefaults(
  defineProps<{
    title?: string;
    description?: string;
  }>(),
  {
    title: TEXT.common.messages.loadFailed,
    description: TEXT.common.messages.requestFailed,
  }
);
</script>

<style scoped>
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 12px;
  color: var(--ctms-text-secondary);
  text-align: center;
}

.state-icon {
  font-size: 36px;
  color: var(--ctms-danger);
  margin-bottom: 10px;
}

.state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ctms-text-main);
}

.state-desc {
  font-size: 12px;
  color: var(--ctms-text-secondary);
  margin-top: 6px;
}

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