<script lang="ts">
	import User from "$lib/components/ui/User.svelte";
	import RepoCard from "$lib/components/repo/RepoCard.svelte";
	import TimelineCard from "./TimelineCard.svelte";
	import { relativeTime } from "$lib/format";
	import { toRepoCard, repoHref } from "./mappers";
	import type { RepoEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";

	let { event, eventAt }: { event: RepoEvent; eventAt: string } = $props();
</script>

<TimelineCard>
	{#snippet header()}
		<User handle={event.repo.owner.handle} did={event.repo.owner.did} />
		{#if event.source}
			<span>forked</span>
			<a href={repoHref(event.source)} class="text-foreground-default"
				>{event.source.owner.handle}/{event.source.slug}</a
			>
			<span>to {event.repo.slug}</span>
		{:else}
			<span>created {event.repo.slug}</span>
		{/if}
		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
	{/snippet}

	<RepoCard
		repo={toRepoCard(event.repo)}
		border={false}
		shadow={false}
		background={false}
		padding="none"
	/>
</TimelineCard>
