<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 bg-surface px-6 py-4 shadow-sm"
					>
						<a
							href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as '/')}
							class="truncate font-bold text-fg-strong no-underline hover:underline"
						>
							{star.ownerHandle}/{star.rkey}
						</a>
					</div>
				{/if}
			{/each}
		</div>
	{/if}
</section>
