<script lang="ts">
import { formatDate } from '$lib/shared/utils/date';

type Props = {
	title?: string | null;
	originalFilename?: string | null;
	documentDate?: string | null;
};

let { title, originalFilename, documentDate }: Props = $props();

const displayTitle = $derived(title || originalFilename || '');
const shortDate = $derived(documentDate ? formatDate(documentDate, 'short') : null);
const longDate = $derived(documentDate ? formatDate(documentDate, 'long') : 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 shortDate}
		<p class="font-sans text-[16px] text-ink-2">
			<span class="lg:hidden">{shortDate}</span>
			<span class="hidden lg:inline">{longDate}</span>
		</p>
	{/if}
</div>
