<script setup lang="ts">
import ChatShimmerText from './ChatShimmerText.vue';

defineOptions({
  name: 'ChatEventLabel',
});

withDefaults(
  defineProps<{
    active?: boolean;
    text: string;
  }>(),
  {
    active: false,
  },
);
</script>

<template>
  <span class="chat-event-label" :class="{ 'is-active': active }">
    <span v-if="$slots.icon" class="chat-event-label__icon" aria-hidden="true">
      <slot name="icon" />
    </span>
    <ChatShimmerText
      class="chat-event-label__text"
      :active="active"
      :text="text"
    />
  </span>
</template>

<style scoped>
.chat-event-label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  color: var(--el-text-color-placeholder);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.chat-event-label__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--el-text-color-placeholder);
}

.chat-event-label__text {
  max-width: 100%;
}
</style>
