<template>
    <section class="popup-container" v-if="popupStore.messages.length > 0">
        <transition-group name="fade" tag="div">
            <div v-for="msg in popupStore.messages" :key="msg.id" class="alert alert-info popup" role="alert">
                {{ msg.text }}
            </div>
        </transition-group>
    </section>
</template>
<script setup>
import { popupStore } from '@/stores/popupStore.js';
</script>
<style scoped>
.popup-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.popup {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Fade animation */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>