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

type GeschichteRow = Pick<
	components['schemas']['GeschichteSummary'],
	'id' | 'title' | 'body' | 'type' | 'author' | 'publishedAt'
>;

let { geschichte }: { geschichte: GeschichteRow } = $props();

const isJourney = $derived(geschichte.type === 'JOURNEY');

const publishedAt = $derived(formatPublishedAt(geschichte.publishedAt, 'short'));

const authorName = $derived(formatAuthorName(geschichte.author));
</script>

<a href="/geschichten/{geschichte.id}" class="block">
	<div class="mb-1 flex items-center gap-1.5">
		<h2 class="font-serif text-xl font-bold text-ink">{geschichte.title}</h2>
		{#if isJourney}
			<span
				data-testid="journey-badge"
				style="font-size: 0.75rem"
				class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
			>
				{m.journey_badge_list()}
			</span>
		{/if}
	</div>
	<p class="mb-3 font-sans text-xs text-ink-3">
		{authorName}
		{#if publishedAt}· {m.geschichten_published_on({ date: publishedAt })}{/if}
	</p>
	{#if geschichte.body}
		<!-- plaintext for JOURNEY, sanitised-HTML→text for STORY; never {@html} -->
		<p class="font-serif text-base text-ink-2">{plainExcerpt(geschichte.body, 150)}</p>
	{/if}
</a>
