<script setup lang="ts">
import { useModalStore } from '@/stores/modal'
import { storeToRefs } from 'pinia'

const modalStore = useModalStore()
const { stack } = storeToRefs(modalStore)
</script>

<template>
	<Teleport to="body">
		<TransitionGroup name="modal" tag="div" class="modal-stack-container">
			<component
				v-for="(modal, index) in stack"
				:key="modal.id"
				:is="modal.component"
				v-bind="modal.props"
				:z-index="9999 + index"
				@close="modalStore.close"
			/>
		</TransitionGroup>
	</Teleport>
</template>

<style lang="scss">
.modal-stack-container {
	position: relative;
	z-index: 9999;
}

.modal-enter-from,
.modal-leave-to {
	.backdrop {
		opacity: 0;
	}

	.modal-content {
		transform: scale(0.95) translateY(64px);
		opacity: 0;
	}
}
</style>
