<script lang="ts">
	import RepoCard from "#lib/components/repo/RepoCard.svelte";
	import TimelineGroup from "#lib/components/timeline/TimelineGroup.svelte";
	import TimelineActorHeader from "#lib/components/timeline/TimelineActorHeader.svelte";
	import { toRepoCard, repoHref, repoOwner } from "#lib/components/timeline/mappers.ts";
	import type { TimelineEvent } from "#lib/components/timeline/group.ts";
	import type * as OrgTangledActorDefs from "#lib/api/lexicons/types/org/tangled/actor/defs.ts";
	import type { StarEvent } from "#lib/api/lexicons/types/org/tangled/feed/getTimeline.ts";

	let {
		actor,
		items,
		signedIn = false
	}: {
		actor: OrgTangledActorDefs.ProfileViewBasic;
		items: TimelineEvent<StarEvent>[];
		signedIn?: boolean;
	} = $props();

	const repo = $derived(items[0].event.repo);
</script>

<TimelineGroup {items}>
	{#snippet title()}
		<TimelineActorHeader {actor} verb="starred" count={items.length} plural="repositories">
			<a href={repoHref(repo)} class="text-foreground-default hover:underline"
				>{repoOwner(repo)}/{repo.slug}</a
			>
		</TimelineActorHeader>
	{/snippet}
	{#snippet row(event)}
		<RepoCard
			repo={toRepoCard(event.repo)}
			starButton={signedIn}
			border={false}
			background={false}
			padding="none"
			class="flex min-h-24 flex-col"
		/>
	{/snippet}
</TimelineGroup>