<script lang="ts">
  import {onMount, type Snippet} from 'svelte';
  import {createFloating} from '../utils/createFloating';
  import type {Placement} from '@floating-ui/dom';

  const { children, floating, placement = 'bottom', onShow, onHide, syncWidth = false, syncWidthMode = 'min' }:
        {
            children: Snippet,
            floating: Snippet,
            placement?: Placement,
            onShow?: () => void,
            onHide?: () => void,
            syncWidth?: boolean,
            syncWidthMode?: 'min' | 'equal'
        } = $props();

    let triggerEl!: HTMLDivElement, contentEl!: HTMLDivElement;
    let floatingInstance: ReturnType<typeof createFloating>;

    onMount(() => {
        floatingInstance = createFloating({
            trigger: triggerEl,
            floatContent: contentEl,
            interactive: true,
            placement,
            onShow,
            onHide,
            syncWidth,
            syncWidthMode
        });

        return () => {
            floatingInstance.destroy();
        };
    });

    export function hide() {
        floatingInstance?.hide();
        onHide?.();
    }
</script>
<div style="position: relative" bind:this={triggerEl}>
    {@render children() }
</div>

<div style="display: none; width: max-content; z-index: 99999; position: absolute;" bind:this={contentEl}>
    {@render floating() }
</div>
