<script setup>
// zIndex lets one modal sit above another — the confirmation prompt is asked
// from inside dialogs as well as from the page behind them.
defineProps({
  title: { type: String, default: "" },
  zIndex: { type: Number, default: 30 },
});
const emit = defineEmits(["close"]);
</script>

<template>
  <div
    class="fixed inset-0 grid place-items-center bg-brand-900/40 p-4 backdrop-blur-sm"
    :style="{ zIndex }"
    @click.self="emit('close')"
  >
    <div class="dh-card w-full max-w-md p-6 shadow-pop">
      <h2 v-if="title" class="mb-4 text-lg font-bold tracking-[-0.02em] text-strong">{{ title }}</h2>
      <slot />
    </div>
  </div>
</template>
