<template>
	<Transition name="modal-animation">
		<div v-show="modalActive" class="modale">
			<transition name="modal-frame-animation">
        <div v-show="modalActive" class="modal-frame">
          <font-awesome-icon class="close-btn"  @click="close" icon="fa-regular fa-circle-xmark" />
          <div class="modale-content">
            <slot>
            </slot> 
          </div>
				</div>
			</transition>
		</div>
	</Transition>
  
</template>

<script setup lang="ts">
const props = defineProps({
  modalActive: Boolean,
  title: String
});

const emit = defineEmits(['close']);

const close = () => {
  emit('close');
};
</script>

<style lang="scss" scoped>

</style>