<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 GeschichteSummary = components['schemas']['GeschichteSummary'];

interface Props {
	drafts: GeschichteSummary[];
}

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

<div
	class="flex flex-col overflow-hidden rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface"
>
	<!-- Card-head -->
	<div class="flex items-center border-b border-line px-3 py-1.5">
		<h3 class="text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
			{m.dashboard_reader_drafts_heading()}
		</h3>
	</div>

	{#if drafts.length === 0}
		<p class="px-3 py-3 font-sans text-sm text-ink-3">{m.dashboard_reader_drafts_empty()}</p>
	{:else}
		<ul class="flex flex-col">
			{#each drafts as draft (draft.id)}
				<li>
					<a
						href="/geschichten/{draft.id}/edit"
						class="flex min-h-[44px] items-center justify-between border-b border-line/50 px-3 py-1.5 last:border-b-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
					>
						<span class="flex min-w-0 flex-col">
							<span class="truncate font-serif text-sm text-ink">{draft.title}</span>
							<span class="text-[11px] text-ink-3">
								{m.dashboard_reader_draft_meta({ relative: relativeTimeDe(new Date(draft.updatedAt)) })}
							</span>
						</span>
						<svg
							width="7"
							height="7"
							viewBox="0 0 7 7"
							fill="none"
							aria-hidden="true"
							class="shrink-0 text-ink-3"
						>
							<path
								d="M1.5 1 L5.5 3.5 L1.5 6"
								stroke="currentColor"
								stroke-width="1.5"
								fill="none"
							/>
						</svg>
					</a>
				</li>
			{/each}
		</ul>
	{/if}
</div>
