<script lang="ts">
	import type { Component } from 'svelte';
	import Tooltip from '$lib/components/Tooltip.svelte';

	// An icon-only action: a round hover target with the label as its tooltip
	// AND its accessible name. The pattern appeared per table and per header
	// before; one component keeps hit area, hover colour and naming identical
	// wherever a row or a title offers something to do.
	type Props = {
		icon: Component<{ size?: number }>;
		label: string;
		onclick: () => void;
		/** danger tints the hover state — deleting should not look like editing. */
		variant?: 'neutral' | 'danger';
		size?: 'sm' | 'md';
		testid?: string;
	};

	let { icon: Icon, label, onclick, variant = 'neutral', size = 'md', testid }: Props = $props();

	const box = $derived(size === 'sm' ? 'h-8 w-8' : 'h-9 w-9');
	const glyph = $derived(size === 'sm' ? 15 : 17);
	const hover = $derived(
		variant === 'danger'
			? 'hover:bg-danger-muted hover:text-danger'
			: 'hover:bg-surface-sunken hover:text-ink'
	);
</script>

<Tooltip text={label} {label} {onclick}>
	<span
		class="flex items-center justify-center rounded-full text-ink-muted transition-colors {box} {hover}"
		data-testid={testid}
	>
		<Icon size={glyph} />
	</span>
</Tooltip>
