1<script lang="ts">
 2	import { BadgeInfo } from '$lib/components/app';
 3	import * as Tooltip from '$lib/components/ui/tooltip';
 4	import { copyToClipboard } from '$lib/utils';
 5	import type { Component } from 'svelte';
 6
 7	interface Props {
 8		class?: string;
 9		icon: Component;
10		value: string | number;
11		tooltipLabel?: string;
12	}
13
14	let { class: className = '', icon: Icon, value, tooltipLabel }: Props = $props();
15
16	function handleClick() {
17		void copyToClipboard(String(value));
18	}
19</script>
20
21{#if tooltipLabel}
22	<Tooltip.Root>
23		<Tooltip.Trigger>
24			<BadgeInfo class={className} onclick={handleClick}>
25				{#snippet icon()}
26					<Icon class="h-3 w-3" />
27				{/snippet}
28
29				{value}
30			</BadgeInfo>
31		</Tooltip.Trigger>
32		<Tooltip.Content>
33			<p>{tooltipLabel}</p>
34		</Tooltip.Content>
35	</Tooltip.Root>
36{:else}
37	<BadgeInfo class={className} onclick={handleClick}>
38		{#snippet icon()}
39			<Icon class="h-3 w-3" />
40		{/snippet}
41
42		{value}
43	</BadgeInfo>
44{/if}