<template>
  <div :class="alertClass">
    <slot />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  variant: {
    type: String,
    default: 'info', // info | error | success | warning
  },
})

const variantMap: Record<string, string> = {
  info: 'alert alert-info',
  error: 'alert alert-error',
  success: 'alert alert-success',
  warning: 'alert alert-warning',
}

const alertClass = computed(() => variantMap[props.variant] || variantMap.info)
</script>
