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

let {
	coCorrespondents,
	personId
}: {
	coCorrespondents: { id: string; name: string; count: number }[];
	personId: 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_hint()}</span>
		</div>
		<div class="flex flex-wrap gap-2">
			{#each coCorrespondents as c (c.id)}
				<a
					href="/briefwechsel?senderId={personId}&receiverId={c.id}"
					title={m.doc_conversation_title()}
					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">×{c.count}</span>
					<!-- Chat 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
						/>
					</svg>
				</a>
			{/each}
		</div>
	</div>
{/if}
