<script lang="ts">
  // v0.2 Phase 5 primitive — Lumotia-tinted Bits UI Tooltip.
  // Used by LumotiaIconButton (Phase 7 sweep) and any control where a
  // visible label would crowd the UI. Honours prefers-reduced-motion
  // through Bits UI's default delay logic; we just style the panel.
  import { Tooltip } from "bits-ui";
  import type { Snippet } from "svelte";

  interface Props {
    text: string;
    side?: "top" | "right" | "bottom" | "left";
    sideOffset?: number;
    delayDuration?: number;
    trigger?: Snippet;
  }

  let {
    text,
    side = "top",
    sideOffset = 6,
    delayDuration = 250,
    trigger,
  }: Props = $props();
</script>

<Tooltip.Provider {delayDuration}>
  <Tooltip.Root>
    <Tooltip.Trigger class="inline-flex">
      {#if trigger}{@render trigger()}{/if}
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content
        {side}
        {sideOffset}
        class="z-50 px-2 py-1 rounded-md bg-bg-card border border-border-subtle text-[11px] text-text shadow-lg"
      >
        {text}
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>
