<template>
  <div class="flex">
    <user-avatar :user="userMessage.user" size="small"
                 class="flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 xl:w-14 xl:h-14 text-sm xl:text-lg"
    />
    <div class="ml-5 flex bg-indigo-100 p-4 rounded shadow relative">
      <div v-if="isAuthorMessage" class="flex absolute top-px right-px">
        <button @click="remove">
          <svg class="text-red w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24" viewBox="0 0 24 24"
               fill="none" stroke="currentColor"
               stroke-width="2" stroke-linecap="round"
               stroke-linejoin="round"
          ><line x1="18" y1="6"
                 x2="6" y2="18"
          ></line><line x1="6" y1="6"
                        x2="18" y2="18"
          ></line></svg>
        </button>
      </div>
      <div class="text-sm text-white break-all">
        <footer class="font-bold mb-2 text-gray-light flex items-center">
          {{ userMessage.user.first_name }}
          <span class="font-normal text-xs text-gray ml-4 lg:ml-8 flex-shrink-0">{{ userMessage.created }}</span>
        </footer>
        {{ userMessage.message }}
      </div>
    </div>
  </div>
</template>
<script>
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
export default {
    components:{
        UserAvatar,
    },
    props: {
        userMessage: {
            type: Object,
            default: () => {}
        },
        profileId: {
            type: Number,
            default: 0
        },
    },
    emits: {
        'remove': null
    },
    computed: {
        isAuthorMessage() {
            return this.profileId != this.userMessage.user.id
        },
    },
    methods: {
        remove(){
            this.$emit('remove', this.userMessage)
        }
    }

}
</script>
