<script lang="ts">
import { navigating } from '$app/state';
import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
import UploadSuccessBanner from './UploadSuccessBanner.svelte';

type IncompleteDoc = {
	id: string;
	title: string;
	uploadedAt: string;
};

interface Props {
	topDocs: IncompleteDoc[];
	totalCount: number;
	bannerCount: number;
	onBannerClose: () => void;
}

let { topDocs, totalCount, bannerCount, onBannerClose }: Props = $props();

const showSkeleton = $derived(!!navigating.type && topDocs.length === 0);
const showBlock = $derived(topDocs.length > 0 || bannerCount > 0 || showSkeleton);
</script>

{#if showBlock}
	<div data-testid="enrichment-block" class="flex flex-col gap-3">
		{#if bannerCount > 0}
			<UploadSuccessBanner count={bannerCount} onClose={onBannerClose} />
		{/if}
		{#if topDocs.length > 0}
			<DashboardNeedsMetadata topDocs={topDocs} totalCount={totalCount} />
		{:else if showSkeleton}
			<div
				data-testid="enrichment-block-skeleton"
				class="h-[360px] animate-pulse rounded-sm border border-line bg-surface/50 motion-reduce:animate-none"
				aria-busy="true"
				aria-label="Lade aktualisierte Liste"
			></div>
		{/if}
	</div>
{/if}
