<script lang="ts">
	import { stringHref } from "#lib/components/strings/urls.ts";
	import Separator from "#lib/components/ui/Separator.svelte";
	import { compactRelativeTime } from "#lib/format.ts";
	import type { StringCardData } from "#lib/components/profile/types.ts";

	let { entry, layout = "card" }: { entry: StringCardData; layout?: "card" | "row" } = $props();
</script>

<div
	class={layout === "row"
		? "flex flex-col gap-2xs sm:flex-row sm:items-center sm:gap-md"
		: "flex min-h-24 flex-col justify-between gap-2xs"}
>
	<div class={layout === "row" ? "min-w-0 flex-1" : "flex flex-1 flex-col gap-xs"}>
		<div
			class="flex min-w-0 items-center justify-between pr-xs font-medium text-foreground-default"
			data-vt="move"
		>
			<a
				href={stringHref(entry.ownerHandle, entry.rkey)}
				class="min-w-0 truncate no-underline hover:underline"
			>
				{entry.filename}
			</a>
		</div>

		{#if layout === "card" && entry.description}
			<p
				data-vt="fade"
				class="line-clamp-2 pr-24 typography-paragraph-small text-foreground-muted"
			>
				{entry.description}
			</p>
		{/if}
	</div>

	<div
		class="flex flex-wrap items-center gap-2xs typography-monospace-small text-foreground-muted"
		data-vt="move"
	>
		{#if entry.sizeLabel}
			<span class="shrink-0">{entry.sizeLabel}</span>
			<Separator variant="dot" />
		{/if}
		<span>{compactRelativeTime(entry.createdAt)}</span>
	</div>
</div>