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

	interface Props {
		ownerHandle: string;
		repoName: string;
		issue: IssueSummary;
	}

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

	const href = $derived(
		resolve(`/${ownerHandle}/${repoName}/issues/${encodeURIComponent(issue.uri)}` as "/")
	);
</script>

<div class="pb-2">
	<a {href} class="text-foreground-default no-underline">
		<span class="hover:underline">{issue.title}</span>
		<span class="text-foreground-subtle">#{issue.rkey}</span>
	</a>
</div>

<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 typography-paragraph-small text-foreground-subtle">
	<IssueStatePill state={issue.state} />

	<span class="ml-1 flex items-center gap-1">
		<User handle={issue.authorHandle} did={issue.authorDid} />
	</span>

	<span class="before:mr-1 before:content-['·']">
		<TimeAgo value={issue.createdAt} />
	</span>

	<span class="before:mr-1 before:content-['·']">
		<a {href} class="text-foreground-subtle no-underline hover:underline">
			{issue.commentCount}
			{issue.commentCount === 1 ? "comment" : "comments"}
		</a>
	</span>
</div>
