<script lang="ts">
	import { resolve } from "$app/paths";
	import { compactRelativeTime } from "$lib/format";
	import type { StringCardData } from "./types";

	let { entry }: { entry: StringCardData } = $props();
</script>

<div
	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
>
	<div class="flex items-center justify-between font-medium text-foreground-default">
		<div class="mr-2 flex min-w-0 flex-1 items-center">
			<a
				href={resolve(`/${entry.ownerHandle}/strings/${entry.rkey}` as "/")}
				class="min-w-0 truncate font-bold text-foreground-default no-underline hover:underline"
			>
				{entry.filename}
			</a>
		</div>
	</div>

	{#if entry.description}
		<p class="line-clamp-2 text-sm text-foreground-muted">{entry.description}</p>
	{/if}

	<div
		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono text-xs text-foreground-subtle"
	>
		<span class="shrink-0"
			>{entry.lines} line{entry.lines === 1 ? "" : "s"} &middot; {compactRelativeTime(
				entry.createdAt
			)}</span
		>
	</div>
</div>
