<template>
    <Teleport to="#teleports" v-if="visible">
        <div @click.self="() => !focused && hide()" class="z-[100] absolute top-0 bottom-0 left-0 right-0 bg-light-0 dark:bg-dark-0 !bg-opacity-80 flex justify-center items-center">
            <div class="relative border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 min-h-40 min-w-72">
                <span v-if="closeIcon" class="cursor-pointer absolute top-1 right-1 flex hover:opacity-75" @click="() => hide()"><Icon :width="20" :height="20" icon="icons/close" /></span>
                <div class="p-6" :class="$attrs.class">
                    <slot></slot>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<script setup lang="ts">
const props = defineProps({
    focused: {
        type: Boolean,
        defualt: false,
    },
    closeIcon: {
        type: Boolean,
        default: true,
    }
})

const emit = defineEmits(['show', 'hide']);
const visible = ref(false);

function show()
{
    visible.value = true;
    emit('show');
}
function hide()
{
    visible.value = false;
    emit('hide');
}

defineExpose({hide, show});
</script>