<template>
  <div
    class="flex flex-col items-center justify-center py-12 text-center"
    role="alert"
  >
    <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-error-bg">
      <svg class="w-8 h-8 text-error" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z"/>
      </svg>
    </div>
    <h2 class="text-lg font-bold text-text mb-2">{{ title }}</h2>
    <p class="text-text-muted text-sm mb-6 max-w-sm">{{ message }}</p>
    <button
      v-if="retryText"
      class="btn-secondary"
      @click="$emit('retry')"
    >
      {{ retryText }}
    </button>
  </div>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  title?: string;
  message?: string;
  retryText?: string;
}>(), {
  title: "Ein Fehler ist aufgetreten",
  message: "Bitte versuchen Sie es erneut.",
  retryText: "Erneut versuchen",
});

defineEmits<{
  retry: [];
}>();
</script>
