<script setup>
import { ref,onMounted } from 'vue';
const emitter = useEmitter();

const statusIcon = ref(null);
const statusMessage = ref(null);

emitter.on("status-bar-update", (state) => {
    var preloadImage = new Image();
    preloadImage.src = '/icons/Pixelarticons/black/' + state.icon + ".svg";
    preloadImage.onload = function() {
        statusIcon.value.src = this.src;
    };
    statusMessage.value.innerText = state.text;
})

onMounted(() => {
    emitter.emit("status-bar-update", {text: "Hola", icon: "check"})
});
</script>
<template>
    <span class="status-text">
        <img class="icon" ref="statusIcon" src=""/>
        <span class="status-message" ref="statusMessage"></span>
    </span>
</template>

<style scoped>
.status-text {
    margin-left: 10px;
    flex-direction: column;
    justify-content: center;
}

.status-message {
    margin-left: 5px;
}
</style>