<script lang="ts">
import { conv_strip_sort_newest, conv_strip_sort_oldest } from '$lib/messages-extra';

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' ? conv_strip_sort_oldest() : conv_strip_sort_newest());
let fromYear = $derived(fromDate ? fromDate.substring(0, 4) : '');
let toYear = $derived(toDate ? toDate.substring(0, 4) : '');
</script>

<div
	class="flex items-center gap-[5px] border-b border-[#FDBA74] bg-[#FFF7ED] px-[18px] py-[6px] text-xs text-[#92400E]"
>
	<span class="text-sm" aria-hidden="true">📋</span>

	{#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>
