<script lang="ts">
  // v0.2 Phase 5 primitive — Lumotia-tinted Bits UI Dialog.
  // Consumers control open via bind:open. Trigger is rendered by the
  // caller (a button + LumotiaIconButton + anchor — anything that
  // can flip open). Keeping the trigger out of the wrapper means
  // /preview can omit the dialog entirely (Wayland-hardened) without
  // pulling in the Bits UI tree.
  import { Dialog } from "bits-ui";
  import { X } from "lucide-svelte";
  import type { Snippet } from "svelte";

  interface Props {
    open: boolean;
    onOpenChange?: (open: boolean) => void;
    title?: string;
    description?: string;
    closeLabel?: string;
    children?: Snippet;
    footer?: Snippet;
  }

  let {
    open = $bindable(false),
    onOpenChange,
    title,
    description,
    closeLabel = "Close",
    children,
    footer,
  }: Props = $props();
</script>

<Dialog.Root bind:open {onOpenChange}>
  <Dialog.Portal>
    <Dialog.Overlay
      class="fixed inset-0 z-40"
      style="background: var(--color-overlay-dim)"
    />
    <Dialog.Content
      class="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 w-[min(90vw,520px)] max-h-[85vh] overflow-auto rounded-2xl bg-bg-card border border-border-subtle shadow-2xl p-6"
    >
      {#if title || description}
        <div class="mb-4">
          {#if title}
            <Dialog.Title class="text-[16px] font-semibold text-text">{title}</Dialog.Title>
          {/if}
          {#if description}
            <Dialog.Description class="text-[13px] text-text-secondary mt-1">{description}</Dialog.Description>
          {/if}
        </div>
      {/if}
      {#if children}
        <div class="text-[13px] text-text">
          {@render children()}
        </div>
      {/if}
      {#if footer}
        <div class="mt-5 flex justify-end gap-2 pt-4 border-t border-border-subtle">
          {@render footer()}
        </div>
      {/if}
      <Dialog.Close
        class="absolute top-3 right-3 size-7 rounded-md flex items-center justify-center text-text-tertiary hover:text-text hover:bg-hover"
        aria-label={closeLabel}
      >
        <X size={16} />
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
