<template>
  <div class="static-card-wrap h-100" :style="{backgroundColor: getCard().backgroundColor}">
    <!-- <div class="image-subtitle">{{getSubtitle().text}}</div> -->
    <div class="description">
      <span :style="{fontSize: getDescription().fontSize, color: getDescription().fontColor}">{{getDescription().text}}</span>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {}
  },
  props: {
    widget: {
      type: Object,
      required: true
    }
  },
  methods: {
    getCard () {
      return this.widget.visual_properties.card || {}
    },
    getTitle () {
      return this.widget.visual_properties.title || {}
    },
    getSubtitle () {
      return this.widget.visual_properties.subtitle || {}
    },
    getDescription () {
      return this.widget.visual_properties.description || {}
    },
    resizeWidget () {
    }
  }
}
</script>

<style lang="scss" scoped>
  .static-card-wrap {
    .image-subtitle {
      font-size: 14px;
      color: #74788d;
      margin-top: -5px;
      margin-bottom: 20px;
    }
  }
</style>
