<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let {
	coCorrespondents,
	personId,
	personName
}: {
	coCorrespondents: { id: string; name: string; count: number }[];
	personId: string;
	personName: string;
} = $props();

function initials(name: string): string {
	return name
		.split(' ')
		.map((n) => n[0] ?? '')
		.join('')
		.slice(0, 2)
		.toUpperCase();
}
</script>

{#if coCorrespondents.length > 0}
	<div class="mb-4 rounded-sm border border-line bg-surface p-4">
		<div class="mb-3 flex items-center justify-between">
			<h3 class="text-[10px] font-bold tracking-widest text-ink-3 uppercase">
				{m.person_co_correspondents_heading()}
			</h3>
			<span class="font-sans text-[10px] text-ink-3 italic"
				>{m.person_correspondents_search_hint()}</span
			>
		</div>
		<div class="flex flex-wrap gap-2">
			{#each coCorrespondents as c (c.id)}
				<a
					href="/documents?senderId={personId}&receiverId={c.id}"
					title={m.person_correspondents_search_title({ A: personName, B: c.name })}
					class="inline-flex items-center gap-1.5 rounded-full border border-line bg-muted px-3 py-1.5 font-sans text-xs font-bold text-ink transition-colors hover:border-primary hover:bg-surface"
				>
					<!-- Initials circle -->
					<span
						class="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-[9px] font-bold text-primary-fg"
					>
						{initials(c.name)}
					</span>
					{c.name}
					<span
						class="text-[10px] font-normal text-ink-3"
						title={m.person_correspondents_badge_title()}>×{c.count}</span
					>
					<!-- Search icon -->
					<svg
						class="h-3 w-3 flex-shrink-0 text-ink-3"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
						aria-hidden="true"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
				</a>
			{/each}
		</div>
	</div>
{/if}
