<script setup lang="ts">
defineProps<{ message: string; retry?: () => void }>()
</script>

<template>
  <div class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-4 py-3">
    <div class="flex items-start gap-3">
      <svg viewBox="0 0 24 24" class="w-5 h-5 mt-0.5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
      </svg>
      <div class="flex-1">
        <div class="font-medium">Une erreur est survenue</div>
        <div class="text-sm mt-0.5 opacity-90">{{ message }}</div>
      </div>
      <button
        v-if="retry"
        type="button"
        class="text-sm font-medium underline hover:no-underline"
        @click="retry"
      >
        Réessayer
      </button>
    </div>
  </div>
</template>
