<template>
    <div class="channel-message">
          <Tag color="var(--text-error)" v-if="!globalStore.currentChannel"><span class="tag-channel"><span>Vous</span> <span>êtes</span> déconnecté </span></Tag>
          <Tag color="var(--text-success)" v-else><span class="tag-channel">Connecté <span>à </span> <Icon icon="fa-solid fa-volume-up"/> <span>{{ globalStore.currentChannel.name }}</span></span></Tag>
    </div>
</template>
<script setup>
import { useGlobalStore } from '@/stores/globalStore';
import Tag from '@/components/UI/Tag.vue';
import { onMounted } from 'vue';
import { updateChannel } from '@/utils/Logic';

const globalStore = useGlobalStore();

onMounted(() => {
    updateChannel()
})

</script>
<style scoped>
.channel-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.channel-message p {
  margin: 0;
}

.tag-channel {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

</style>