<script lang="ts">
	import type { Snippet } from "svelte";
	import IssueStatePill from "./IssueStatePill.svelte";
	import User from "$lib/components/ui/User.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";

	interface Props {
		state: "open" | "closed";
		authorHandle: string;
		authorDid: string;
		createdAt: string;
		actions?: Snippet;
	}

	let { state, authorHandle, authorDid, createdAt, actions }: Props = $props();
</script>

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

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

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

	{#if actions}
		<div class="ml-auto flex items-center gap-2">
			{@render actions()}
		</div>
	{/if}
</div>
