/** * 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="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
    @click="handleClick"
  >
    <ProjectIcon
      :entity-id="project.handleId"
      :icon-size="48"
      :image-url="project.image"
      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
    />

    <div class="overflow-hidden">
      <h3 class="text-sm font-semibold truncate">
        {{ project.name || unnamedProject }}
      </h3>

      <div class="text-xs text-slate-500 truncate">
        <font-awesome icon="user" class="text-slate-400" />
        {{ issuerDisplayName }}
      </div>
    </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";
import { UNNAMED_PROJECT } from "@/constants/entities";

/**
 * 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[];

  /**
   * Get the unnamed project constant
   */
  get unnamedProject(): string {
    return UNNAMED_PROJECT;
  }

  /**
   * 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>
