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

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

<template>
  <section class="empty-state">
    <div class="empty-state-mark">HW</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>
