<template>
    <DialogRoot v-if="!priority" v-model="model">
        <DialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></DialogTrigger>
        <DialogPortal v-if="!disabled">
            <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
            <DialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
                <DialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</DialogTitle>
                <DialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</DialogDescription>
                <slot />
                <DialogClose v-if="iconClose" class="text-light-100 dark:text-dark-100 absolute top-2 right-2 inline-flex h-6 w-6 appearance-none items-center justify-center outline-hidden text-xl" aria-label="Close">
                    <span aria-hidden>×</span>
                </DialogClose>
            </DialogContent>
        </DialogPortal>
    </DialogRoot>
    <AlertDialogRoot v-else v-model="model">
        <AlertDialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></AlertDialogTrigger>
        <AlertDialogPortal v-if="!disabled">
            <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
            <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
                <AlertDialogTitle v-if="!!title" class="text-3xl font-light relative -top-2">{{ title }}</AlertDialogTitle>
                <AlertDialogDescription v-if="!!description" class="text-base pb-2">{{ description }}</AlertDialogDescription>
                <slot />
            </AlertDialogContent>
        </AlertDialogPortal>
    </AlertDialogRoot>
</template>

<script setup lang="ts">
const { label, title, description, priority = false, disabled = false, iconClose = true } = defineProps<{
    label?: string
    title?: string
    description?: string
    priority?: boolean
    disabled?: boolean
    iconClose?: boolean
}>();
const model = defineModel();
</script>