<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { relativeTimeDe } from '$lib/shared/relativeTime';
import type { components } from '$lib/generated/api';

type Geschichte = components['schemas']['Geschichte'];

interface Props {
	drafts: Geschichte[];
}

const { drafts }: Props = $props();
</script>

<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
		{m.dashboard_reader_drafts_heading()}
	</h2>
	{#if drafts.length === 0}
		<p class="font-sans text-sm text-ink-3">{m.dashboard_reader_drafts_empty()}</p>
	{:else}
		<ul class="flex flex-col gap-2">
			{#each drafts as draft (draft.id)}
				<li>
					<a
						href="/geschichten/{draft.id}/edit"
						class="flex min-h-[44px] items-center justify-between gap-4 rounded-sm py-2 transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
					>
						<span class="text-ink-1 truncate font-serif text-sm">{draft.title}</span>
						<span class="shrink-0 font-sans text-xs text-ink-3">
							{relativeTimeDe(new Date(draft.updatedAt))}
						</span>
					</a>
				</li>
			{/each}
		</ul>
	{/if}
</div>
