1<script lang="ts">
 2	import { Button } from '$lib/components/ui/button';
 3	import * as Tooltip from '$lib/components/ui/tooltip';
 4	import type { Component } from 'svelte';
 5
 6	interface Props {
 7		icon: Component;
 8		tooltip: string;
 9		variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
10		size?: 'default' | 'sm' | 'lg' | 'icon';
11		class?: string;
12		disabled?: boolean;
13		onclick: () => void;
14		'aria-label'?: string;
15	}
16
17	let {
18		icon,
19		tooltip,
20		variant = 'ghost',
21		size = 'sm',
22		class: className = '',
23		disabled = false,
24		onclick,
25		'aria-label': ariaLabel
26	}: Props = $props();
27</script>
28
29<Tooltip.Root>
30	<Tooltip.Trigger>
31		<Button
32			{variant}
33			{size}
34			{disabled}
35			{onclick}
36			class="h-6 w-6 p-0 {className} flex"
37			aria-label={ariaLabel || tooltip}
38		>
39			{@const IconComponent = icon}
40			<IconComponent class="h-3 w-3" />
41		</Button>
42	</Tooltip.Trigger>
43
44	<Tooltip.Content>
45		<p>{tooltip}</p>
46	</Tooltip.Content>
47</Tooltip.Root>