<template>
  <div
    class="rounded-input border border-[#FECDCA] bg-clinical-danger-bg p-4"
    role="alert"
  >
    <p class="text-sm font-semibold text-clinical-danger">{{ title }}</p>
    <p v-if="message" class="mt-1 text-sm text-ink">{{ message }}</p>
    <p v-if="preserved" class="mt-2 text-sm text-ink-secondary">{{ preserved }}</p>
    <div class="mt-3 flex flex-wrap items-center gap-3">
      <button
        v-if="retryLabel"
        type="button"
        class="btn-secondary text-sm py-1.5"
        @click="$emit('retry')"
      >
        {{ retryLabel }}
      </button>
      <slot name="actions" />
    </div>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string
    message?: string
    /** What was preserved / not lost */
    preserved?: string
    retryLabel?: string
  }>(),
  {
    retryLabel: 'Retry',
  }
)

defineEmits<{
  (e: 'retry'): void
}>()
</script>
