<template>
<div>
  <span class="text-muted">{{ message.received.toLocaleTimeString() }}&nbsp;</span>
  <span class="fw-bold" :style="{ color: user.color }">{{ user.name }}&nbsp;</span>
  <span>{{ message.content }}</span>
</div>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '../../stores/userStore'
import Constants from '../../common/constants'
import { useMercuryStore } from '../../stores/mercuryStore';

const props = defineProps(['message'])
const message = props.message

const mercuryStore = useMercuryStore()
const userStore = useUserStore()

const user = computed(() => { return message.userId === Constants.SelfId ?  mercuryStore.user : userStore.getUserById(message.userId) })
</script>
