<template>
  <v-card class="mb-2 pa-2 rounded-lg border-sm" elevation="0">
    <v-row no-gutters align="center">
      <v-col cols="12" sm="4" class="d-flex justify-center align-center">
        <v-img
          :src="image"
          alt="Photo"
          max-height="100"
          width="100%"
          cover
          class="rounded-lg"
        />
      </v-col>

      <v-col cols="12" sm="8" class="py-2 pe-1">
        <v-row dense>
          <v-col cols="12" class="d-flex align-center flex-wrap">
            <span class="text-caption font-weight-medium me-1">Created by</span>

            <v-avatar color="surface-variant" size="20" class="me-1">
              <v-img
                v-if="userProfile"
                :src="userProfile"
                width="20"
                height="20"
              />
              <span v-else class="text-overline">
                {{ getNameInitials }}
              </span>
            </v-avatar>

            <span class="text-caption">{{ createdByName || "Unknown" }}</span>
          </v-col>

          <v-col cols="12" class="text-caption">Subject: {{ subject }}</v-col>

          <v-col cols="12" class="text-caption">
            Status: <span class="text-orange">{{ status }}</span>
          </v-col>

          <v-col cols="12" class="text-caption">
            Date Created: {{ createdAt }}
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
const { getNameInitials } = useUtils();

defineProps({
  image: String,
  subject: String,
  status: String,
  createdAt: String,
  createdByName: String,
  userProfile: String,
  getNameInitials: Function,
});
</script>
