<script lang="ts">
  import type { Snippet } from "svelte";

  let { title, onclose, children }: { title: string; onclose: () => void; children: Snippet } = $props();
</script>

<div
  class="fixed inset-0 z-40 flex items-center justify-center bg-black/30 p-4"
  role="presentation"
  onclick={(e) => { if (e.target === e.currentTarget) onclose(); }}
>
  <div class="w-full max-w-[440px] rounded-2xl border border-line-soft bg-panel p-6 shadow-[0_4px_20px_rgba(26,26,24,.07)]">
    <div class="mb-4 text-[15px] font-semibold">{title}</div>
    {@render children()}
  </div>
</div>
