<template>
    <div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40" @click.self="emit('close')">
        <div class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
            <h2 class="font-arvo text-primary text-sm md:text-base" v-if="heading" v-text="heading"></h2>
            <slot></slot>
            <a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
                <close-icon class="text-gray-700 w-5 h-5"></close-icon>
            </a>
        </div>
    </div>
</template>

<script setup>
import CloseIcon from './icons/CloseIcon.vue';

const emit = defineEmits(['close']);
const props = defineProps({
    heading: {
        required: false,
        default: () => '',
    },
});
</script>
