<script setup lang="ts">
import { X } from "@lucide/vue";

defineProps<{
  title: string;
  labelledBy: string;
}>();

defineEmits<{ close: [] }>();
</script>

<template>
  <div class="modal-backdrop" role="presentation" @click.self="$emit('close')">
    <section class="app-dialog" role="dialog" aria-modal="true" :aria-labelledby="labelledBy">
      <header class="dialog-header">
        <h2 :id="labelledBy">{{ title }}</h2>
        <button type="button" class="dialog-close" aria-label="关闭" @click="$emit('close')">
          <X :size="20" aria-hidden="true" />
        </button>
      </header>
      <div class="dialog-content"><slot /></div>
      <footer v-if="$slots.footer" class="dialog-footer"><slot name="footer" /></footer>
    </section>
  </div>
</template>
