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

interface Props {
	senderName: string;
	fromDate?: string;
	toDate?: string;
	sortDir?: string;
}

let { senderName, fromDate = '', toDate = '', sortDir = 'DESC' }: Props = $props();

let hasDateFilter = $derived(!!(fromDate || toDate));
let sortLabel = $derived(
	sortDir === 'ASC' ? m.conv_strip_sort_oldest() : m.conv_strip_sort_newest()
);
let fromYear = $derived(fromDate ? fromDate.substring(0, 4) : '');
let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
</script>

<div
	class="mt-4 flex items-center gap-1.5 rounded-sm border border-accent bg-accent-bg px-4 py-2.5 text-sm text-ink"
>
	<svg
		xmlns="http://www.w3.org/2000/svg"
		width="14"
		height="14"
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		stroke-width="1.5"
		stroke-linecap="round"
		stroke-linejoin="round"
		aria-hidden="true"
		class="shrink-0"
	>
		<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
		<rect x="9" y="3" width="6" height="4" rx="1" />
	</svg>

	{#if hasDateFilter}
		<strong>{senderName}</strong>
		<span>·</span>
		<span>{fromYear}–{toYear}</span>
		<span>·</span>
		<span>{sortLabel}</span>
	{:else}
		Alle Briefe von <strong>{senderName}</strong> — wähle einen Korrespondenten oben um einzugrenzen
	{/if}
</div>
