<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<!-- Responsibility: 展示空状态、诊断与单一恢复动作。 -->

<script setup lang="ts">
import { PackageOpen } from "lucide-vue-next";
import type { Component } from "vue";
import ApiErrorDiagnostic from "./ApiErrorDiagnostic.vue";
import type { ApiError, ErrorDiagnostic } from "@/types";

withDefaults(defineProps<{
  title: string;
  description?: string;
  actionLabel?: string;
  icon?: Component;
  apiError?: ApiError | null;
  diagnostic?: ErrorDiagnostic | null;
}>(), {
  icon: () => PackageOpen
});
defineEmits<{ action: [] }>();
</script>

<template>
  <section class="empty-state">
    <div class="empty-state-mark" aria-hidden="true">
      <component :is="icon" :size="20" />
    </div>
    <h2>{{ title }}</h2>
    <p v-if="description">{{ description }}</p>
    <ApiErrorDiagnostic v-if="apiError || diagnostic" :error="description" :api-error="apiError" :diagnostic="diagnostic" compact :show-message="false" />
    <button v-if="actionLabel" class="btn btn-primary" type="button" @click="$emit('action')">{{ actionLabel }}</button>
  </section>
</template>
