/** * 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 || "Unnamed Project" }}
    </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, Emit } 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.emitProjectSelected(this.project);
  }

  // Emit methods using @Emit decorator

  @Emit("project-selected")
  emitProjectSelected(project: PlanData): PlanData {
    return project;
  }
}
</script>

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