<script>
export default {
  props: {
    image: {type: String, default: "motorcycle.png"},
    size: {type: String, default: "md"},
    has_animation: {type: Boolean, default: true},
    caption: {type: String, default: "Loading ..."},
    margin_span : {type : String, default : "10vh 0"},
    additional_class: {type: String, default: ""}
  },
  data: () => ({
    image_size: "96px",
  }),
  methods: {
    convertSizeToHeight() {
      switch (this.size) {
        case 'md' :
          return "96px";
        case 'sm' :
          return "64px"
        case 'lg' :
          return "128px"
      }
    }
  }
}
</script>
<template>
  <div class="col-12 text-center" :style="`margin: ${margin_span}`">
    <img :src="`${$utility.getAssetUrl()}/${image}`" :height="convertSizeToHeight()" :class="`${(has_animation)? 'bouncing' : ''}`">
    <h5 class="font-weight-bold text-black60 mx-auto mt-2 mb-4 text-center">{{ caption }}</h5>
  </div>
</template>

