<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import type { components } from '$lib/generated/api';
import { plainExcerpt } from '$lib/shared/utils/extractText';
import { formatDate } from '$lib/shared/utils/date';
import { formatAuthorName } from './utils';

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

interface Props {
	geschichten: GeschichteSummary[];
	personId: string;
	personName: string;
	canWrite: boolean;
}

let { geschichten, personId, personName, canWrite }: Props = $props();

const visible = $derived(geschichten.slice(0, 3));
const hasOverflow = $derived(geschichten.length >= 3);

function formatPublishedDate(g: GeschichteSummary): string | null {
	if (!g.publishedAt) return null;
	return formatDate(g.publishedAt.slice(0, 10), 'short');
}

function authorName(g: GeschichteSummary): string {
	return formatAuthorName(g.author);
}
</script>

{#if geschichten.length > 0}
	<section
		aria-labelledby="geschichten-card-heading"
		class="rounded-sm border border-line bg-surface p-6 shadow-sm"
	>
		<header class="mb-5 flex items-center justify-between">
			<h2
				id="geschichten-card-heading"
				class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
			>
				{m.geschichten_card_heading()}
			</h2>
			{#if canWrite}
				<a
					href="/geschichten/new?personId={personId}"
					class="inline-flex items-center font-sans text-sm font-medium text-ink-2 hover:text-ink"
				>
					{m.geschichten_card_write_action()}
				</a>
			{/if}
		</header>

		<ul class="-mx-2">
			{#each visible as g (g.id)}
				<li>
					<a
						href="/geschichten/{g.id}"
						class="group flex flex-col gap-1 border-b border-line px-2 py-3 transition-colors last:border-b-0 hover:bg-muted"
					>
						<span class="font-serif text-base font-bold text-ink group-hover:underline">
							{g.title}
						</span>
						<span class="font-sans text-xs text-ink-3">
							{authorName(g)}
							{#if formatPublishedDate(g)}· {formatPublishedDate(g)}{/if}
						</span>
						{#if g.body}
							<span class="font-serif text-sm text-ink-2">{plainExcerpt(g.body, 80)}</span>
						{/if}
					</a>
				</li>
			{/each}
		</ul>

		{#if hasOverflow}
			<footer class="mt-4 border-t border-line pt-3">
				<a
					href="/geschichten?personId={personId}"
					class="inline-flex items-center font-sans text-sm font-medium text-ink hover:underline"
				>
					{m.geschichten_card_show_all_for_person({ name: personName })} →
				</a>
			</footer>
		{/if}
	</section>
{/if}
