<script lang="ts">
	import { resolve } from "$app/paths";
	import RepoCard from "$lib/components/repo/RepoCard.svelte";
	import EmptyState from "../EmptyState.svelte";
	import type { StarData } from "../types";

	let { stars }: { stars: StarData[] } = $props();
</script>

<section>
	<h2 class="px-2 pb-4 text-base font-medium">Starred</h2>
	{#if stars.length === 0}
		<EmptyState message="No stars yet." />
	{:else}
		<div class="flex flex-col gap-4">
			{#each stars as star (star.uri)}
				{#if star.kind === "repo"}
					<RepoCard repo={star.repo} />
				{:else}
					<div
						class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
					>
						<a
							href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
							class="truncate font-bold text-foreground-default no-underline hover:underline"
						>
							{star.ownerHandle}/{star.rkey}
						</a>
					</div>
				{/if}
			{/each}
		</div>
	{/if}
</section>
