<script lang="ts">
  import type { OpportunityContact } from "../types";
  import NoResultsMonkey from "../../../../../components/NoResultsMonkey.svelte";

  export let contacts: OpportunityContact[];
</script>

<div class="contacts-tab">
  {#if contacts.length === 0}
    <div class="tab-empty">
      <NoResultsMonkey message="No contacts associated with this opportunity" />
    </div>
  {:else}
    <div class="contacts-grid">
      {#each contacts as c (c.id)}
        <div class="contact-card">
          <div class="contact-avatar">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              width="20"
              height="20"
            >
              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" /><circle
                cx="12"
                cy="7"
                r="4"
              />
            </svg>
          </div>
          <div class="contact-info">
            <span class="contact-name">{c.contact?.name ?? "Unknown"}</span>
            {#if c.role?.name}
              <span class="contact-role">{c.role.name}</span>
            {/if}
            {#if c.company?.name}
              <span class="contact-company">{c.company.name}</span>
            {/if}
            {#if c.notes}
              <span class="contact-notes">{c.notes}</span>
            {/if}
          </div>
          {#if c.referralFlag}
            <span class="contact-badge referral">Referral</span>
          {/if}
        </div>
      {/each}
    </div>
  {/if}
</div>
