<script setup>
defineProps({
    type: {
        type: String,
        default: 'error',
    },
});

const styles = {
    error: 'border-red-200 bg-red-50 text-red-800',
    success: 'border-emerald-200 bg-emerald-50 text-emerald-800',
    info: 'border-sky-200 bg-sky-50 text-sky-800',
};
</script>

<template>
    <div
        class="mb-4 flex items-start gap-2 rounded-xl border px-4 py-3 text-sm"
        :class="styles[type] ?? styles.error"
    >
        <slot />
    </div>
</template>
