<template>
  <div class="loading-content">
    <img
      :src="loadingImg"
      alt=""
      class="loading-spinner-image"
      :style="{ width: size, height: size, margin: spinnerMargin }"
    />
    <p v-if="$slots.default" :style="textStyle">
      <slot />
    </p>
  </div>
</template>

<script setup>
import loadingImg from '@/assets/icon/Azizi/loading.webp'

defineProps({
  size: {
    type: String,
    default: '80px',
  },
  spinnerMargin: {
    type: String,
    default: '0 auto',
  },
  textStyle: {
    type: [String, Object, Array],
    default: '',
  },
})
</script>

<style scoped>
.loading-spinner-image {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: contain;
}
</style>
