<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 bg-surface 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-fg-strong"
			>
				{vouch.handle}
			</a>
			<span class={`flex items-center gap-1 text-sm ${denounce ? 'text-danger' : 'text-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-fg-subtle">&middot; {relativeTime(vouch.createdAt)}</span>
			</span>
		</div>
	</div>

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