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

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

<Section title="Starred" empty={stars.length === 0} emptyMessage="No stars yet.">
	{#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}
</Section>
