<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="rounded bg-background-default p-4 shadow-xs border border-border-default">
	<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 text-sm 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>
</div>
