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

	interface Props {
		pinned: RepoCardData[];
	}

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

<div class="grid gap-6 md:grid-cols-8">
	<div class="order-1 md:col-span-4">
		<Section
			title="Pinned repositories"
			empty={pinned.length === 0}
			emptyMessage="No pinned repositories."
		>
			{#each pinned as repo (repoKey(repo))}
				<RepoCard {repo} starButton={false} showOwner={false} />
			{/each}
		</Section>
	</div>

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