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

interface Props {
	chipLabel: string;
	otherName: string;
	dateRange?: string;
	canWrite: boolean;
	relId: string;
	onEdit?: () => void;
}

let { chipLabel, otherName, dateRange = '', canWrite, relId, onEdit }: Props = $props();
</script>

<li class="flex items-center gap-2 py-2">
	<span
		class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
	>
		{chipLabel}
	</span>
	<span class="min-w-0 flex-1 truncate font-serif text-sm text-ink">
		{otherName}
	</span>
	{#if dateRange}
		<span class="shrink-0 font-sans text-xs text-ink-3" data-testid="date-range">{dateRange}</span>
	{/if}
	{#if canWrite && onEdit}
		<button
			type="button"
			onclick={onEdit}
			aria-label="{m.relation_edit()} — {otherName}"
			class="inline-flex h-11 w-11 items-center justify-center text-ink-3 transition-colors hover:text-primary"
		>
			<svg
				class="h-3.5 w-3.5"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				aria-hidden="true"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"
				/>
			</svg>
		</button>
	{/if}
	{#if canWrite}
		<form method="POST" action="?/deleteRelationship" use:enhance class="shrink-0">
			<input type="hidden" name="relId" value={relId} />
			<button
				type="submit"
				aria-label="{m.btn_delete()} — {otherName}"
				class="inline-flex h-11 w-11 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
			>
				<svg
					class="h-3.5 w-3.5"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
					aria-hidden="true"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
				</svg>
			</button>
		</form>
	{/if}
</li>
