<template>
  <Teleport to="body">
    <div v-if="open" class="modal-backdrop" @mousedown.self="$emit('close')">
      <section
        :class="['form-modal glass-panel relative isolate shadow-2xl', { 'compact-modal': compact, 'wide-form-modal': wide }]"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="titleId"
      >
        <header>
          <div>
            <span v-if="eyebrow" class="eyebrow">{{ eyebrow }}</span>
            <h3 :id="titleId">{{ title }}</h3>
            <p v-if="description">{{ description }}</p>
          </div>
          <button class="modal-close" type="button" aria-label="Close dialog" @click="$emit('close')">
            <X :size="16" />
          </button>
        </header>
        <slot />
      </section>
    </div>
  </Teleport>
</template>

<script setup>
import { computed } from 'vue';
import { X } from '@lucide/vue';

const props = defineProps({
  open: Boolean,
  title: { type: String, required: true },
  eyebrow: { type: String, default: '' },
  description: { type: String, default: '' },
  compact: Boolean,
  wide: Boolean
});

defineEmits(['close']);

const titleId = computed(() => `modal-title-${props.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'dialog'}`);
</script>
