<script lang="ts">
  import { ContextMenu } from "bits-ui";
  import type { Snippet } from "svelte";

  interface Props {
    children: Snippet<[{ props: Record<string, unknown> }]>;
    menu: Snippet;
  }

  const { children, menu }: Props = $props();
</script>

<ContextMenu.Root>
  <ContextMenu.Trigger>
    {#snippet child({ props })}
      {@render children({ props })}
    {/snippet}
  </ContextMenu.Trigger>
  <ContextMenu.Portal>
    <ContextMenu.Content class="bg-menu-content">
      {@render menu()}
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>
