<script setup>
import { Logger } from '@/logger.js'

const icon = {
    success: "fa-trophy",
    info: "fa-circle-exclamation",
    warning: "fa-triangle-exclamation",
    danger: "fa-fire",
};

</script>
<template>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-5 position-fixed bottom-0 end-0 my-1">
            <div
                v-for="(item, index) in Logger.items"
                :key="index"
                class="alert alert-dismissible d-flex align-items-center"
                :class="'alert-' + item.type"
            >
                <button
                    type="button"
                    class="btn-close"
                    @click="Logger.delete(item)"
                />
                <i
                    class="fs-3 me-3 fa"
                    :class="icon[item.type]"
                /> {{ item.message }}
            </div>
        </div>
    </div>
</template>
<style scoped>
</style>

