<template>
  <div class="loader" v-if="loading">
    <div class="flex flex-col justify-center items-center">
      <ProgressSpinner :style="{ width: '50px', height: '50px' }" strokeWidth="5" />
    </div>
    <div class="flex flex-row justify-center items-center">
      <span class="text-2xl">{{ message }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const ProgressSpinner = defineAsyncComponent(() => import('primevue/progressspinner'))

defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  message: {
    type: String,
    default: 'Loading...'
  }
})

</script>
<style scoped lang="scss">

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(9, 5, 5, 0.56);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .text-2xl {
    margin-top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
  }
}
</style>