<script setup>
defineProps({ warnings: Array })
</script>

<template>
  <div v-if="warnings?.length">
    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Notices</h3>
    <div class="space-y-2">
      <div
        v-for="(w, i) in warnings"
        :key="i"
        class="flex items-start gap-2.5 bg-amber-50 border border-amber-100 rounded-md px-3 py-2.5"
      >
        <span class="text-amber-500 text-sm flex-shrink-0 mt-0.5">⚠</span>
        <span class="text-xs text-gray-600">
          {{ w.message }}<span v-if="w.page" class="text-gray-400"> · page {{ w.page }}</span>
        </span>
      </div>
    </div>
  </div>
</template>
