<script lang="ts">
import PersonChip from './PersonChip.svelte';
import OverflowPillDisplay from '$lib/shared/primitives/OverflowPillDisplay.svelte';

type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };

type Props = {
	sender: Person | null | undefined;
	receivers: Person[];
	abbreviated: boolean;
	extraCount: number;
};

let { sender, receivers, abbreviated, extraCount }: Props = $props();

const visibleReceivers = $derived(receivers.slice(0, 2));
</script>

<div class="hidden min-w-0 items-center gap-1.5 overflow-hidden xs:flex">
	{#if sender}
		<PersonChip person={sender} abbreviated={abbreviated} />
	{/if}

	{#if sender && receivers.length > 0}
		<img
			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Long-Arrow/Long-Arrow-Right-MD.svg"
			alt=""
			aria-hidden="true"
			class="h-6 w-6 shrink-0 opacity-40"
		/>
	{/if}

	{#each visibleReceivers as receiver, i (receiver.id)}
		<span class={i === 1 ? 'hidden md:contents' : ''}>
			<PersonChip person={receiver} abbreviated={abbreviated} />
		</span>
	{/each}

	{#if extraCount > 0}
		<OverflowPillDisplay extraCount={extraCount} />
	{/if}
</div>
