<script lang="ts">
	import { resolve } from "$app/paths";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import ShieldCheck from "$icon/shield-check";
	import ShieldAlert from "$icon/shield-alert";
	import { relativeTime } from "$lib/format";
	import type { VouchData } from "./types";

	let { vouch }: { vouch: VouchData } = $props();
	const denounce = $derived(vouch.kind === "denounce");
</script>

<article class="rounded border border-border-default bg-background-default px-6 py-4 shadow-sm">
	<div class="flex items-center gap-4">
		<Avatar src={vouch.avatar} handle={vouch.handle} size="size-12" />
		<div class="min-w-0 flex-grow">
			<a
				href={resolve(`/${vouch.handle}` as "/")}
				class="block truncate font-medium text-foreground-default"
			>
				{vouch.handle}
			</a>
			<span
				class={`flex items-center gap-1 text-sm ${denounce ? "text-foreground-danger" : "text-foreground-success"}`}
			>
				{#if denounce}
					<ShieldAlert class="size-3.5" aria-hidden="true" />denounced
				{:else}
					<ShieldCheck class="size-3.5" aria-hidden="true" />vouched
				{/if}
				<span class="text-foreground-subtle">&middot; {relativeTime(vouch.createdAt)}</span>
			</span>
		</div>
	</div>

	{#if vouch.reason}
		<p class="mt-3 text-sm text-foreground-muted">{vouch.reason}</p>
	{/if}
</article>
