<script lang="ts">
  interface ReadReceipt {
    userId: string;
    name: string;
    avatarUrl: string | null;
    timestamp?: number;
  }

  interface Props {
    receipts: ReadReceipt[];
  }

  let { receipts }: Props = $props();
</script>

{#if receipts.length > 0}
  <div
    class="flex items-center gap-1 mt-1 ml-14"
    title="Read by {receipts.map((r) => r.name).join(', ')}"
  >
    <span class="text-xs text-light/40 mr-1">Read by</span>
    <div class="flex -space-x-1">
      {#each receipts.slice(0, 5) as reader}
        <div
          class="w-4 h-4 rounded-full bg-dark border border-night overflow-hidden"
          title={reader.name}
        >
          {#if reader.avatarUrl}
            <img
              src={reader.avatarUrl}
              alt={reader.name}
              class="w-full h-full object-cover"
            />
          {:else}
            <div
              class="w-full h-full bg-primary/50 flex items-center justify-center text-[8px] text-white"
            >
              {reader.name[0]?.toUpperCase()}
            </div>
          {/if}
        </div>
      {/each}
      {#if receipts.length > 5}
        <div
          class="w-4 h-4 rounded-full bg-light/20 border border-night flex items-center justify-center text-[8px] text-light"
        >
          +{receipts.length - 5}
        </div>
      {/if}
    </div>
  </div>
{/if}
