<script lang="ts">
	import TrendingUp from "$icon/trending-up";
	import type { RepoCardData } from "#lib/components/profile/types.ts";
	import PreviewCard from "#lib/components/timeline/PreviewCard.svelte";
	import TrendingReposList from "#lib/components/timeline/TrendingReposList.svelte";
	import Pending from "#lib/components/ui/Pending.svelte";
	import Bones from "#lib/components/ui/Bones.svelte";
	import timelineTrendingreposlistSkeletonFixture from "#lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json";

	let {
		repos = []
	}: {
		repos?: RepoCardData[] | Promise<RepoCardData[]>;
	} = $props();
</script>

<PreviewCard title="Trending" icon={TrendingUp}>
	{#if repos instanceof Promise}
		<Pending>
			{#snippet skeleton()}
				<Bones capture={timelineTrendingreposlistSkeletonFixture} />
			{/snippet}
			{@const resolved = await repos}
			<TrendingReposList repos={resolved} />
		</Pending>
	{:else}
		<TrendingReposList {repos} />
	{/if}
</PreviewCard>