<template>
    <div :class="classes" role="alert">
        <div v-if="message">
            {{ message }}
        </div>
        <slot />
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{ type?: 'info' | 'success' | 'warning' | 'error'; message?: string }>(), {
    type: 'info',
});

const typeClassMap: Record<string, string> = {
    info: 'bg-blue-50 text-blue-800 border-blue-200',
    success: 'bg-green-50 text-green-800 border-green-200',
    warning: 'bg-yellow-50 text-yellow-800 border-yellow-200',
    error: 'bg-red-50 text-red-800 border-red-200',
};

const classes = computed(() => `border p-4 rounded-md ${typeClassMap[props.type]}`);
</script>