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

	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-3 hidden flex-wrap items-center justify-between gap-2 border-b border-border-default pb-2 typography-paragraph-small md:flex"
>
	<div class="flex min-w-0 flex-wrap items-center gap-2">
		{#if commit.authorName}
		    <!-- no email→did mapping yet, always the placeholder -->
			<Avatar size="size-5" />
			<span class="truncate text-foreground-default">{commit.authorName}</span>
			<span class="text-foreground-subtle" aria-hidden="true">&middot;</span>
		{/if}
		<a {href} class="min-w-0 truncate text-foreground-default no-underline hover:underline">
			{commit.subject}
		</a>
		{#if commit.when}
			<span class="text-foreground-subtle" aria-hidden="true">&middot;</span>
			<span class="text-foreground-subtle"><TimeAgo value={commit.when} /></span>
		{/if}
	</div>
	<a
		{href}
		class="w-fit rounded-sm bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
	>
		{commit.shortHash}
	</a>
</div>
