<!-- Popup component -->
<script setup lang="ts">
import { useTemplateRef } from 'vue';
import Button from '../base/Button.vue';

// Props
const {
    cancelButtonText,
    cancelButtonType = 'secondary',
    confirmButtonText,
    confirmButtonType = 'primary',
    size = 'normal',
    loading = false,
} = defineProps<{
    cancelButtonText?: string;
    cancelButtonType?: 'primary' | 'danger' | 'secondary';
    confirmButtonText: string;
    confirmButtonType?: 'primary' | 'danger' | 'secondary';
    size?: 'small' | 'normal';
    loading?: boolean;
}>();

// Emits
const emit = defineEmits<{
    popupConfirm: [];
}>();

// Store popup in ref
const popupRef = useTemplateRef('popup');

// Open popup
const openPopup = () => {
    popupRef.value.showModal();
};

// Close popup
const closePopup = () => {
    popupRef.value.close();
};

// Expose both functions to the parent
defineExpose({ openPopup, closePopup });
</script>

<template>
    <dialog
        ref="popup"
        class="group fixed left-1/2 top-1/2 m-0 grid place-items-center pointer-events-none opacity-0 -translate-x-1/2 -translate-y-1/2 size-full bg-transparent transition-opacity duration-300 open:pointer-events-auto open:opacity-100 backdrop:bg-base-500/60"
    >
        <div
            :class="[
                'flex flex-col items-center gap-7 w-full max-w-[600px] bg-white -translate-y-16 group-open:translate-y-0 transition-transform duration-300',
                size === 'normal' && 'px-6 md:px-10 py-8 md:py-12',
                size === 'small' && 'p-6 ',
            ]"
            v-loading="loading"
        >
            <!-- Popup body -->
            <slot />

            <!-- Popup controls -->
            <div class="flex flex-col md:flex-row items-center gap-3 mx-auto max-md:w-full md:max-w-[340px]">
                <Button
                    class="max-md:w-full"
                    :text="cancelButtonText"
                    :type="cancelButtonType"
                    @click.prevent="closePopup"
					v-if="cancelButtonText"
                />
                <Button
                    class="max-md:w-full"
                    :text="confirmButtonText"
                    :type="confirmButtonType"
                    @click.prevent="emit('popupConfirm')"
                />
            </div>
        </div>
    </dialog>
</template>

<style scoped></style>
