<style scoped>
.error-notification {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.error-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}
.error-text {
    color: #721c24;
    flex: 1;
}
.error-dismiss {
    background: none;
    border: none;
    color: #721c24;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.7;
}
.error-dismiss:hover {
    opacity: 1;
}
</style>

<template>
    <div v-if="visible" class="error-notification" role="alert">
        <span class="error-icon" aria-hidden="true">✗</span>
        <span class="error-text">{{ message }}</span>
        <button
            v-if="dismissible"
            type="button"
            class="error-dismiss"
            aria-label="Dismiss error"
            @click="dismiss"
        >
            ×
        </button>
    </div>
</template>

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

const props = withDefaults(
    defineProps<{
        message?: string;
        dismissible?: boolean;
    }>(),
    {
        message: "Something went wrong. Your request could not be completed. Please try again.",
        dismissible: true,
    },
);

const emit = defineEmits<{
    dismissed: [];
}>();

const visible = ref(true);

function dismiss() {
    visible.value = false;
    emit("dismissed");
}

function show() {
    visible.value = true;
}

defineExpose({ show, dismiss });
</script>
