<script lang="ts">
import { formatDocumentDate, type DatePrecision } from '$lib/shared/utils/documentDate';
import { getLocale } from '$lib/paraglide/runtime.js';

type Props = {
	title?: string | null;
	originalFilename?: string | null;
	documentDate?: string | null;
	metaDatePrecision?: DatePrecision | null;
	metaDateEnd?: string | null;
	metaDateRaw?: string | null;
};

let {
	title,
	originalFilename,
	documentDate,
	metaDatePrecision = null,
	metaDateEnd = null,
	metaDateRaw = null
}: Props = $props();

const displayTitle = $derived(title || originalFilename || '');
const precision = $derived<DatePrecision>(metaDatePrecision ?? (documentDate ? 'DAY' : 'UNKNOWN'));
const dateLabel = $derived(
	documentDate
		? formatDocumentDate(documentDate, precision, metaDateEnd, metaDateRaw, getLocale())
		: null
);
</script>

<div class="min-w-0 flex-1 overflow-hidden">
	<h1
		class="truncate font-serif text-[18px] leading-tight text-ink lg:text-[20px]"
		title={displayTitle}
	>
		{displayTitle}
	</h1>
	{#if dateLabel}
		<p class="font-sans text-[16px] text-ink-2">{dateLabel}</p>
	{/if}
</div>
