<script lang="ts">
	import { resolve } from "$app/paths";
	import ArrowUpRight from "$icon/arrow-up-right";
	import ArrowDownLeft from "$icon/arrow-down-left";
	import { relativeTime } from "$lib/format";
	import type { VouchData } from "./types";

	let { vouch, profileLabel }: { vouch: VouchData; profileLabel: string } = $props();

	const denounce = $derived(vouch.kind === "denounce");
	const outgoing = $derived(vouch.direction === "outgoing");
</script>

<div class="relative z-10 -ml-4 flex items-start gap-3">
	<div
		class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${denounce ? "bg-background-danger-subtle" : "bg-background-success-subtle"}`}
	>
		{#if outgoing}
			<ArrowUpRight
				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
				aria-hidden="true"
			/>
		{:else}
			<ArrowDownLeft
				class={`size-5 ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
				aria-hidden="true"
			/>
		{/if}
	</div>

	<div class="mt-1 flex flex-col gap-1">
		<div class="flex flex-wrap items-center gap-1 text-foreground-default">
			{#if outgoing}
				<span class="font-medium">{profileLabel}</span>
			{:else}
				<a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
					>{vouch.handle}</a
				>
			{/if}
			<span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span>
			{#if outgoing}
				<a href={resolve(`/${vouch.handle}` as "/")} class="font-medium hover:underline"
					>{vouch.handle}</a
				>
			{:else}
				<span class="font-medium">{profileLabel}</span>
			{/if}
			<span class="text-sm text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
		</div>
		{#if vouch.reason}
			<p class="text-sm text-foreground-subtle">{vouch.reason}</p>
		{/if}
	</div>
</div>
