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

interface Props {
	aliases: Array<{
		id: string;
		lastName: string;
		firstName?: string | null;
		type: string;
		sortOrder: number;
	}>;
	personFirstName?: string | null;
}

let { aliases, personFirstName }: Props = $props();

let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));

function typeLabel(type: string): string {
	switch (type) {
		case 'BIRTH':
			return m.person_alias_type_BIRTH();
		case 'WIDOWED':
			return m.person_alias_type_WIDOWED();
		case 'DIVORCED':
			return m.person_alias_type_DIVORCED();
		default:
			return m.person_alias_type_OTHER();
	}
}
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.person_alias_heading()}
	</h2>

	{#if sorted.length === 0}
		<p class="text-sm text-ink-2 italic">{m.person_alias_empty()}</p>
	{:else}
		<ul class="space-y-2">
			{#each sorted as alias (alias.id)}
				<li>
					<span class="text-ink-2 italic">{typeLabel(alias.type)}</span>
					<span class="font-serif text-ink">
						{alias.firstName ?? personFirstName}
						{alias.lastName}
					</span>
				</li>
			{/each}
		</ul>
	{/if}
</div>
