<template>
  <v-card class="mb-2 pa-4 rounded-lg" width="400" elevation="2">
    <v-row no-gutters align="center">
      <v-col cols="auto" class="mr-3">
        <v-avatar color="surface-variant" size="35">
          <v-img v-if="currentUser?.profile" width="15" height="15" />
          <span v-else class="text-h5">{{ getNameInitials(senderName) }}</span>
        </v-avatar>
      </v-col>

      <v-col class="d-flex flex-column">
        <span class="text-body-2 font-weight-medium">{{ senderName }}</span>
        <span class="text-caption text-grey">{{ role }}</span>
      </v-col>
    </v-row>

    <v-row no-gutters class="mt-1">
      <v-col>
        <span class="py-2">{{ message }}</span>

        <v-row no-gutters justify="space-between" align="center" class="mt-1">
          <v-col cols="auto">
            <span class="text-caption">{{ timestamp }}</span>
          </v-col>
          <v-col
            v-if="isCurrentUser"
            cols="auto"
            class="d-flex align-center bg-grey-200"
          >
            <v-icon size="16" class="mr-1 text--secondary"
              >mdi-eye-outline</v-icon
            >
            <span class="text-caption text--secondary">{{ seenLabel }}</span>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
defineProps<{
  isCurrentUser: boolean;
  message: string;
  timestamp: string;
  seenLabel?: string;
  senderName: string;
  role?: string;
}>();

const { currentUser } = useLocalAuth();
const { getNameInitials } = useUtils();
</script>
