<template>
    <div class="modal modalContainer fade" :class="styleType" :data-type="type">
        <div class="modal-dialog" :class="dialogClasses">
            <div class="modal-content">
                <div class="modal-body">
                    <slot />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{
    type?: string;
    size?: string;
    styleType?: string;
}>(), {
    type: '',
    size: '',
    styleType: 'stick-up'
});

const dialogClasses = computed(() => ({
    'modal-lg': props.size === 'large',
    'modal-xl': props.size === 'extra-large',
    'modal-sm': props.size === 'small'
}));
</script>
