<template>
  <div class="msg-user">
    <div class="msg-user-wrap">
      <div class="msg-user-bubble">
        <div class="msg-user-text">{{ msg.text }}</div>
        <div v-if="msg.images?.length || msg.files?.length" class="msg-user-attachments">
          <img
            v-for="(src, i) in msg.images"
            :key="`img-${i}`"
            :src="src"
            class="msg-user-image"
            @click="openImage(src)"
          />
          <span
            v-for="(file, i) in msg.files"
            :key="`file-${i}`"
            class="msg-user-file-pill"
          >
            <i class="ph ph-file"></i>
            {{ file.name }}
          </span>
        </div>
      </div>
      <span v-if="msgTime" class="msg-time msg-time--user">{{ msgTime }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useTimeLabel } from '@/composables/useTime.js'

const props = defineProps({ msg: { type: Object, required: true } })

const tsRef = computed(() => props.msg.time)
const msgTime = useTimeLabel(tsRef)

function openImage(src) {
  window.open(src, '_blank')
}
</script>