<script lang="ts">
	import { umsetzungInfo, type UmsetzungKategorie } from '$lib/umsetzung';

	let { kategorie, score = null, showTooltip = true }: { 
		kategorie: string | null; 
		score?: number | null;
		showTooltip?: boolean;
	} = $props();
	
	const info = $derived(umsetzungInfo(kategorie as UmsetzungKategorie));
	let tooltipVisible = $state(false);
</script>

<span 
	class="relative inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium cursor-help"
	style="background-color: {info.farbe}20; color: {info.farbe}; border: 1px solid {info.farbe}40;"
	onmouseenter={() => tooltipVisible = true}
	onmouseleave={() => tooltipVisible = false}
>
	<span class="mr-1">{info.icon}</span> 
	{info.label}
	{#if score !== null && score !== undefined}
		<span class="ml-1 opacity-60">({(score * 100).toFixed(0)}%)</span>
	{/if}
	
	{#if showTooltip && tooltipVisible}
		<div class="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg pointer-events-none">
			<div class="font-bold mb-1">{info.icon} {info.label}</div>
			<div class="mb-2 leading-relaxed">{info.beschreibung}</div>
			<div class="text-gray-400 italic">Beispiel: {info.beispiel}</div>
			{#if info.score_range}
				<div class="mt-1 text-gray-400">Score: {info.score_range[0]}–{info.score_range[1]}</div>
			{/if}
			<div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-gray-900 rotate-45"></div>
		</div>
	{/if}
</span>
