<script lang="ts">
import type { components } from '$lib/generated/api';

type Doc = Pick<
	components['schemas']['Document'],
	'id' | 'thumbnailUrl' | 'thumbnailAspect' | 'pageCount'
>;

let { doc }: { doc: Doc } = $props();

const url = $derived(doc.thumbnailUrl ?? null);
const aspect = $derived(doc.thumbnailAspect ?? 'PORTRAIT');
const pageCount = $derived(doc.pageCount ?? 1);
const tileClass = $derived(aspect === 'LANDSCAPE' ? 'h-[120px] w-[168px]' : 'h-[168px] w-[120px]');
</script>

<div
	data-testid="conv-thumb-tile"
	data-aspect={aspect}
	class="relative {tileClass} flex-shrink-0 overflow-hidden rounded-sm border border-line bg-white"
>
	{#if url}
		<img
			src={url}
			alt=""
			class="h-full w-full object-cover object-top dark:mix-blend-multiply"
			loading="lazy"
			decoding="async"
		/>
	{:else}
		<div
			data-testid="conv-thumb-skeleton"
			class="h-full w-full bg-line/60 motion-safe:animate-pulse"
			aria-hidden="true"
		></div>
	{/if}

	{#if pageCount > 1}
		<span
			data-testid="conv-thumb-page-badge"
			class="absolute top-1 right-1 rounded-full bg-primary/90 px-2 py-1 text-sm leading-none font-bold text-surface"
			>{pageCount}</span
		>
	{/if}
</div>
