<script lang="ts">
  import { createEventDispatcher } from 'svelte'

  interface Props {
    title: string
    open: boolean
    children?: import('svelte').Snippet
  }

  let { title, open, children }: Props = $props()
  const dispatch = createEventDispatcher<{ close: void }>()

  function onBackdrop(e: MouseEvent) {
    if (e.target === e.currentTarget) dispatch('close')
  }
</script>

{#if open}
  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
    onclick={onBackdrop}
  >
    <div class="bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4 overflow-hidden">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700">
        <h2 class="text-lg font-semibold text-white">{title}</h2>
        <button
          class="text-gray-400 hover:text-white transition-colors"
          onclick={() => dispatch('close')}
        >✕</button>
      </div>
      <div class="p-5">
        {@render children?.()}
      </div>
    </div>
  </div>
{/if}
