<template>
    <div class="fullwidth banner_wrapper">
      <Img :src="_imageSrc" :alt="_alt" :width="_width" :height="_height" />
      <div class="banner_content fullwidth">
        <div class="container">
          <Span v-html="_messagehtml"></Span>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';

import Img from './Img.vue';
import Span from './Span.vue';

export default Vue.extend({
  name: 'Banner',
  components: { 
      Img, Span
  },
  props: {
    imageSrc: {
      type: String,
    },
    messagehtml: {
      type: String,
    },
    height: {
      type: Number,
    },
    width: {
      type: Number,
    },
    alt: {
      type: String,
    }
  },
  computed: {
    _imageSrc (): string {
      return this.imageSrc
    },
    _height (): number {
      return this.height
    },
    _width (): number {
      return this.width
    },
    _messagehtml (): string {
      return this.messagehtml
    },
    _alt (): string {
      return this.alt
    }
  }
})
</script>