<script lang="ts">
	// a mock outgoing vouch from alice for bob, rendered with the web app's own
	// VouchCard. the -ml-md the card carries for the vouch tab's rail is
	// cancelled by the wrapper's padding so it sits flush in the panel.
	import VouchCard from "$lib/components/profile/VouchCard.svelte";
	import type { VouchData } from "$lib/components/profile/types";

	const vouch: VouchData = {
		uri: "at://did:plc:alice/sh.tangled.graph.vouch/3lzx7k2abcd2s",
		did: "did:plc:bob",
		handle: "bob.tngl.sh",
		kind: "vouch",
		direction: "outgoing",
		reason: "reviews my patches and catches the subtle regressions",
		createdAt: new Date(Date.now() - 2 * 86400000).toISOString()
	};
</script>

<div
	class="vouch-card-demo not-content my-lg rounded-md border border-border-default bg-background-default px-md py-md typography-paragraph-regular">
	<div class="ps-md">
		<VouchCard {vouch} profileLabel="alice.tngl.sh" />
	</div>
</div>

<style>
	/* the surrounding markdown column styles `p` and `a`; hand them back */
	:global(.vouch-card-demo p) {
		margin: 0;
	}
	:global(.vouch-card-demo a) {
		color: inherit;
		text-decoration: none;
	}
	:global(.vouch-card-demo a:hover) {
		text-decoration: underline;
	}
</style>