<script setup>
defineProps({
  variant: { type: String, default: 'error' }, // error | warning | success | info
})
</script>

<template>
  <div
    :class="[
      'flex items-start gap-3 p-4 rounded-lg border text-sm',
      variant === 'error'   && 'bg-red-50 border-red-200 text-gray-800',
      variant === 'warning' && 'bg-amber-50 border-amber-200 text-gray-800',
      variant === 'success' && 'bg-green-50 border-green-200 text-gray-800',
      variant === 'info'    && 'bg-blue-50 border-blue-200 text-gray-800',
    ]"
  >
    <slot />
  </div>
</template>
