<script lang="ts">
	import RepoCard from "$lib/components/repo/RepoCard.svelte";
	import EmptyState from "../EmptyState.svelte";
	import ActivityStub from "../ActivityStub.svelte";
	import type { RepoCardData } from "../types";

	interface Props {
		pinned: RepoCardData[];
	}

	let { pinned }: Props = $props();
</script>

<div class="grid gap-6 md:grid-cols-8">
	<section class="order-1 md:col-span-4">
		<h2 class="px-2 pb-4 text-base font-medium">Pinned repositories</h2>
		{#if pinned.length === 0}
			<EmptyState message="No pinned repositories." />
		{:else}
			<div class="flex flex-col gap-4">
				{#each pinned as repo (repo.rkey)}
					<RepoCard {repo} starButton={false} showOwner={false} />
				{/each}
			</div>
		{/if}
	</section>

	<section class="order-2 md:col-span-4">
		<h2 class="px-2 pb-4 text-base font-medium">Activity</h2>
		<ActivityStub />
	</section>
</div>
