<script lang="ts">
	import { resolve } from "$app/paths";
	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
	import CommitAuthor from "#lib/components/repo/CommitAuthor.svelte";
	import Separator from "#lib/components/ui/Separator.svelte";
	import type { CommitSummary } from "#lib/components/repo/types.ts";

	interface Props {
		ownerHandle: string;
		repoName: string;
		commit: CommitSummary;
	}

	let { ownerHandle, repoName, commit }: Props = $props();

	const href = $derived(resolve(`/${ownerHandle}/${repoName}/commit/${commit.hash}` as "/"));
</script>

<div
	class="mb-sm hidden flex-wrap items-center justify-between gap-xs typography-paragraph-small md:flex"
>
	<div class="flex min-w-0 flex-wrap items-center gap-xs">
		{#if commit.authorHandle || commit.authorName}
			<CommitAuthor
				name={commit.authorName}
				email={commit.authorEmail}
				did={commit.authorDid}
				handle={commit.authorHandle}
			/>
			<Separator variant="dot" class="text-foreground-subtle!" />
		{/if}
		<a {href} class="min-w-0 truncate text-foreground-default no-underline hover:underline">
			{commit.subject}
		</a>
		{#if commit.when}
			<Separator variant="dot" class="text-foreground-subtle!" />
			<span class="text-foreground-muted"><TimeAgo value={commit.when} /></span>
		{/if}
	</div>
	<a {href} class="typography-monospace-small text-foreground-muted no-underline hover:underline">
		{commit.shortHash}
	</a>
</div>
<Separator class="my-md" />