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

let {
	id,
	title,
	onremove
}: {
	id: string;
	title: string | null;
	onremove: () => void;
} = $props();

const chipLabel = $derived(title ?? id.slice(0, 8));
</script>

<div
	class="inline-flex min-h-11 items-center gap-1.5 rounded-full border border-primary bg-primary px-3 text-primary-fg"
	aria-live="polite"
>
	<span class="font-sans text-xs tracking-wider whitespace-nowrap uppercase">
		{m.geschichten_filter_document_chip()}
	</span>
	<span class="line-clamp-2 font-serif italic sm:max-w-[16rem] sm:truncate" title={chipLabel}>
		{chipLabel}
	</span>
	<button
		type="button"
		onclick={onremove}
		aria-label={m.geschichten_filter_remove_document_chip({ title: chipLabel })}
		class="ml-0.5 flex min-h-[44px] min-w-[44px] items-center justify-center rounded-full focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
	>
		<span aria-hidden="true">×</span>
	</button>
</div>
