<template>
  <b-overlay
    :show="busy"
    :variant="variant"
    :opacity="opacity"
    :no-center="noCenter"
    :class="[...wrapperClass, { 'vh-50': busy }]"
  >
    <template v-slot:overlay>
      <div :class="loaderClass">
        <b-spinner class="mr-2" />
        <strong class="h4">{{ $t('Common.Loading') }}</strong>
      </div>
    </template>
    <slot />
  </b-overlay>
</template>

<script>
export default {
  name: 'LoadingWrapper',
  props: {
    busy: { type: Boolean, default: false },
    opacity: { type: String, default: '0.98' },
    noCenter: { type: Boolean, default: false },
    variant: { type: String, default: 'white' },
    wrapperClass: { type: [Array, String], default: () => [] },
    loaderClass: { type: [Array, String], default: () => ['text-center', 'text-primary', 'my-5', 'p-5'] },
  },
}
</script>
