<!-- Display notifications in entire App -->
<script setup lang="ts">
import Message from '../base/Message.vue';
import { useAutoAnimate } from '@formkit/auto-animate/vue';
import { useNotificationStore } from '~src/admin/stores/useNotificationStore';

// Get the messages from the store
const { messages } = useNotificationStore();

// Animation of notifiactions
const [notifiactionsWrapper] = useAutoAnimate({ duration: 300, easing: 'ease-in-out' });
</script>

<template>
    <!-- Wrap in transition for last element animation -->
    <Transition name="fade">
        <div class="flex flex-col gap-3 fixed top-12 right-12 z-20" ref="notifiactionsWrapper" v-if="messages.length">
            <Message
                class="min-w-[150px] shadow-md"
                v-for="(message, i) in messages"
                :key="i"
                :message="message.message"
                :type="message.type"
								:link="message.link"
                :show-icon="true"
                size="large"
            />
        </div>
    </Transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

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