<script lang="ts">
	import { relativeTime } from "$lib/format";
	import Button from "$lib/components/ui/Button.svelte";
	import Spinner from "$lib/components/ui/Spinner.svelte";
	import KeyIcon from "$icon/key";
	import Trash2 from "$icon/trash-2";

	interface Props {
		name: string;
		fingerprint?: string;
		createdAt: string;
		deleting?: boolean;
		onDelete: () => void;
	}

	let { name, fingerprint, createdAt, deleting = false, onDelete }: Props = $props();
</script>

<div class="flex items-center justify-between gap-2">
	<div class="flex min-w-0 flex-col gap-1">
		<div class="flex items-center gap-2">
			<KeyIcon class="size-4 shrink-0 text-foreground-muted" aria-hidden="true" />
			<span class="font-bold text-foreground-default">{name}</span>
		</div>
		{#if fingerprint}
			<span class="truncate font-mono typography-paragraph-small text-foreground-subtle">{fingerprint}</span>
		{/if}
		<span class="typography-paragraph-small text-foreground-subtle">added {relativeTime(createdAt)}</span>
	</div>
	<Button
		variant="danger"
		icon={deleting ? Spinner : Trash2}
		disabled={deleting}
		onclick={onDelete}
	>
		Delete
	</Button>
</div>
