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

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

const variantMap: Record<string, string> = {
  info: 'bg-primary-subtle text-primary border border-primary-subtle',
  error: 'bg-neutral-bg text-neutral-text border border-primary-subtle',
}

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