<template>
  <div class="my-bundle">
    <b-row class="mb-2">
      <b-col>
        <h5 class="text-black-50 mt-0">{{ $t('MyBundle.BundleImageDisplay.Title') }}</h5>
      </b-col>
    </b-row>

    <b-row class="mb-2">
      <b-col>
        <b-overlay :show="loading" variant="white">
          <template v-slot:overlay>
            <div class="text-center">
              <b-spinner class="mx-2 text-primary" />
              <strong class="h4">{{ $t('Common.Uploading') }}</strong>
            </div>
          </template>

          <b-img-lazy
            fluid
            center
            thumbnail
            blank-width="600"
            blank-height="300"
            :src="imageSource"
            blank-color="#e9ecef"
            class="object-fit-scale-down bundle-image-display"
          />
        </b-overlay>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: 'BundleImageUploader',
  props: {
    imageSrc: { type: String, default: null },
    loading: { type: Boolean, default: false },
  },
  computed: {
    imageSource() {
      return this.imageSrc || '/static/products/img-placeholder.svg'
    },
  },
}
</script>
