﻿<template>
  <div class="flex flex-column">
    <div class="flex flex-row p-1 items-center">
      <div class="px-2 content-center">
        <img :src="message.portrait"
             alt="Profile Image"
             class="rounded-full"
             width="32px"
             height="32px">
      </div>

      <div class="p-2 flex-1">
        <div class="flex justify-between items-center">
          <div>
            <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
            <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
          </div>
          <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn variant="plain" icon v-bind="props">
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list>
              <v-list-item @click="editMessage(message)">
                <v-list-item-title>Edit</v-list-item-title>
              </v-list-item>
              <v-list-item @click="deleteMessage(message)">
                <v-list-item-title>Delete</v-list-item-title>
              </v-list-item>
              <v-list-item @click="reportMessage(message)">
                <v-list-item-title>Report</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>

        <div class="font-sans">
          {{ message.value }}
        </div>
      </div>
    </div>   
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  methods: {
    editMessage(message) {
      // Logic for editing the message
      console.log('Edit message', message);
    },
    deleteMessage(message) {
      // Logic for deleting the message
      console.log('Delete message', message);
    },
    reportMessage(message) {
      // Logic for reporting the message
      console.log('Report message', message);
    }
  }
}
</script>

<style scoped>
.content-center {
  display: flex;
  align-items: center;
}
</style>
