<template>
	<div
		v-if="showOverlay"
		class="global-loading-overlay"
	>
		<div class="loading-content">
			<div class="spinner-container">
				<i class="pi pi-spin pi-spinner"></i>
			</div>
			<h3 class="loading-title">Loading</h3>
			<p class="loading-message">{{ loadingMessage }}</p>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue";
import { useLoadingStore } from "../../stores/loading";

const props = defineProps({
	// Show overlay only for global loading, not component-specific
	globalOnly: {
		type: Boolean,
		default: true,
	},
	// Minimum display time to prevent flashing
	minDisplayTime: {
		type: Number,
		default: 300,
	},
});

const loadingStore = useLoadingStore();

const showOverlay = computed(() => {
	if (props.globalOnly) {
		return loadingStore.isLoading;
	}
	return loadingStore.isAnyLoading;
});

const loadingMessage = computed(() => {
	return loadingStore.loadingMessage;
});
</script>

<style scoped>
.global-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: opacity 0.2s ease;
}

.loading-content {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	width: 90%;
	text-align: center;
}

.spinner-container {
	margin-bottom: 1rem;
}

.spinner-container i {
	font-size: 3rem;
	color: #1976d2;
}

.loading-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.5rem;
}

.loading-message {
	color: #666;
	font-size: 0.95rem;
}
</style>
