<script lang="ts">
  import type { ContactView } from "$lib/api/types";
  import Avatar from "$lib/components/ui/Avatar.svelte";

  interface Props {
    contact: ContactView;
  }

  let { contact }: Props = $props();

  const name = $derived(
    [contact.first_name, contact.last_name].filter(Boolean).join(" ") ||
      "Contact"
  );
</script>

<div class="Contact">
  <Avatar {name} colorKey={contact.user_id ?? 0} size={2.5} />
  <div class="info">
    <div class="name">{name}</div>
    {#if contact.phone_number}
      <div class="phone">{contact.phone_number}</div>
    {/if}
  </div>
</div>

<style lang="scss">
  .Contact {
    display: flex;
    align-items: center;
    gap: 0.625rem;

    min-width: 12rem;
    margin-bottom: 0.25rem;
  }

  .name {
    font-weight: var(--font-weight-medium);
  }

  .phone {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
  }
</style>
