<script lang="ts">
	import { resolve } from "$app/paths";
	import { canonicalHandle } from "#lib/api/profileIdentifier.ts";
	import ArrowUpRight from "$icon/arrow-up-right";
	import ArrowDownLeft from "$icon/arrow-down-left";
	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
	import type { VouchData } from "#lib/components/profile/types.ts";

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

	const href = $derived(resolve(`/${canonicalHandle(vouch.handle) ?? vouch.did}` as "/"));
	const denounce = $derived(vouch.kind === "denounce");
	const outgoing = $derived(vouch.direction === "outgoing");
	const tone = $derived(
		denounce
			? { bg: "bg-background-danger-subtle", fg: "text-foreground-danger" }
			: { bg: "bg-background-success-subtle", fg: "text-foreground-success" }
	);
</script>

<div class="relative z-10 -ml-md flex items-start gap-sm">
	<div
		class={`flex size-8 shrink-0 items-center justify-center rounded-full border border-border-default ${tone.bg}`}
	>
		{#if outgoing}
			<ArrowUpRight class={`size-5 ${tone.fg}`} aria-hidden="true" />
		{:else}
			<ArrowDownLeft class={`size-5 ${tone.fg}`} aria-hidden="true" />
		{/if}
	</div>

	<div class="mt-2xs flex flex-col gap-2xs">
		<div class="flex flex-wrap items-center gap-2xs text-foreground-default">
			{#if outgoing}
				<span class="font-medium">{profileLabel}</span>
			{:else}
				<a {href} class="font-medium hover:underline">{vouch.handle}</a>
			{/if}
			<span class="text-foreground-subtle">{denounce ? "denounced" : "vouched for"}</span>
			{#if outgoing}
				<a {href} class="font-medium hover:underline">{vouch.handle}</a>
			{:else}
				<span class="font-medium">{profileLabel}</span>
			{/if}
			<TimeAgo
				value={vouch.createdAt}
				class="typography-paragraph-small text-foreground-subtle"
			/>
		</div>
		{#if vouch.reason}
			<p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p>
		{/if}
	</div>
</div>