<script lang="ts">
  let { 
    text = "", 
    position = 'top',
    variant = 'default' 
  } = $props();

  let x = $state(-999);
  let y = $state(-999);
  let visible = $state(false);

  export function setPosition(newX: number, newY: number) {
    x = newX;
    y = newY;
    visible = true;
  }

  export function hideTooltip() {
    visible = false;
  }

  // Svelte 5 Reaktivität für dynamische Klassen basierend auf dem Typ
  let containerClass = $derived(
    variant === 'warning' ? 'bg-amber-700' :
    variant === 'danger' ? 'bg-red-700' :
    'bg-slate-700' // default
  );

  let arrowClass = $derived(
    variant === 'warning' ? 'bg-amber-700' :
    variant === 'danger' ? 'bg-red-700' :
    'bg-slate-700' // default
  );
</script>

<div
  class="fixed z-[9999] pointer-events-none transition-opacity duration-200 {visible ? 'opacity-100' : 'opacity-0'}"
  style="left: {x}px; top: {y}px;"
>
  <div class="relative text-xs text-white px-2 py-1 rounded shadow-xl max-w-xs {containerClass}">
    
    {@html text}

    <div class="absolute w-2 h-2 rotate-45 {arrowClass}
      {position === 'top' ? 'bottom-[-4px] left-1/2 -translate-x-1/2' : ''}
      {position === 'bottom' ? 'top-[-4px] left-1/2 -translate-x-1/2' : ''}
      {position === 'left' ? 'right-[-4px] top-1/2 -translate-y-1/2' : ''}
      {position === 'right' ? 'left-[-4px] top-1/2 -translate-y-1/2' : ''}"
    ></div>
  </div>
</div>