<template>
  <div class="msg-user">
    <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>
  </div>
</template>

<script setup>
defineProps({ msg: { type: Object, required: true } })

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