<script setup>
import { ref } from 'vue';

import ModalBase       from './Elements/Base.vue';
import SecondaryButton from '../Button/Secondary.vue';

/** Eventos */
const emit = defineEmits(['close']);

/** Propiedades */
const props = defineProps({
    title: String
});

/** Referencias */
const modalRef = ref(null);

/** Exposiciones */
defineExpose({
    open: ()  => modalRef.value.open(),
    close: () => modalRef.value.close()
});
</script>

<template>
    <ModalBase
        ref="modalRef"
        @close="emit('close')"
    >
        <template #title>
            <p
                class="font-bold text-xl"
                v-text="title ?? $t('details')"
            />
        </template>
        <template #content>
            <div class="w-full right-0">
                <div class="overflow-hidden shadow-lg">
                    <slot />
                </div>
            </div>
        </template>
        <template #footer>
            <div class="space-x-2">
                <slot name="buttons" />
                <SecondaryButton
                    v-text="$t('close')"
                    @click="modalRef.close()" 
                />
            </div>
        </template>
    </ModalBase>
</template>