<template>
  <Transition name="fade">
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-container">
        <div class="loading-spinner">
          <svg viewBox="0 0 50 50">
            <circle class="spinner-track" cx="25" cy="25" r="20"></circle>
            <circle class="spinner-progress" cx="25" cy="25" r="20"></circle>
          </svg>
        </div>
        <img src="/Static_zy/brand_logo_emblem.6b54fb204ac512d8.svg" alt="Loading" class="loading-logo">
      </div>
      <!-- <p class="loading-text">Processing your application...</p> -->
    </div>
  </Transition>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { useLoadingStore } from "@/stores/loadingStore";

export default defineComponent({
  setup() {
    const loadingStore = useLoadingStore();
    const isLoading = computed(() => loadingStore.isLoading);
    return { isLoading };
  },
});
</script>

<style scoped>
.loading-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #C8127C 0%, #A30F66 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2000;
}

.loading-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-logo {
  width: 60px;
  height: 60px;
  z-index: 1;
}

.loading-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 1.5s linear infinite;
}

.loading-spinner svg circle {
  fill: none;
  stroke-width: 3;
}

.loading-spinner .spinner-track {
  stroke: rgba(255, 255, 255, 0.2);
}

.loading-spinner .spinner-progress {
  stroke: #fff;
  stroke-linecap: round;
  stroke-dasharray: 31.4 94.2;
}

.loading-text {
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
