/**
 * ProjectCard.vue - Individual project display component
 * 
 * Extracted from GiftedDialog.vue to handle project entity display
 * with selection states and issuer information.
 * 
 * @author Matthew Raymer
 */
<template>
  <li
    class="cursor-pointer"
    @click="handleClick"
  >
    <div class="relative w-fit mx-auto">
      <ProjectIcon
        :entity-id="project.handleId"
        :icon-size="48"
        :image-url="project.image"
        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
      />
    </div>
    
    <h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
      {{ project.name }}
    </h3>
    
    <div class="text-xs text-slate-500 truncate">
      <font-awesome icon="user" class="fa-fw text-slate-400" />
      {{ issuerDisplayName }}
    </div>
  </li>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-facing-decorator";
import ProjectIcon from "./ProjectIcon.vue";
import { PlanData } from "@/interfaces/records";
import { Contact } from "@/db/tables/contacts";
import { didInfo } from "@/libs/endorserServer";

/**
 * ProjectCard - Displays a project entity with selection capability
 * 
 * Features:
 * - Shows project icon using ProjectIcon
 * - Displays project name and issuer information
 * - Handles click events for selection
 * - Shows issuer name using didInfo utility
 */
@Component({
  components: {
    ProjectIcon,
  },
})
export default class ProjectCard extends Vue {
  /** Project entity to display */
  @Prop({ required: true })
  project!: PlanData;

  /** Active user's DID for issuer display */
  @Prop({ required: true })
  activeDid!: string;

  /** All user's DIDs for issuer display */
  @Prop({ required: true })
  allMyDids!: string[];

  /** All contacts for issuer display */
  @Prop({ required: true })
  allContacts!: Contact[];

  /**
   * Computed display name for the project issuer
   */
  get issuerDisplayName(): string {
    return didInfo(
      this.project.issuerDid,
      this.activeDid,
      this.allMyDids,
      this.allContacts
    );
  }

  /**
   * Handle card click - emit project selection
   */
  handleClick(): void {
    this.$emit("project-selected", this.project);
  }
}
</script>

<style scoped>
/* Component-specific styles if needed */
</style>