<template>
  <section :style="'background-color:' + _backgroundColor + '; color:' + _color + '; background-image: url('+_backgroundImage+')'" :class="_class">
    <div class="container">
        <slot></slot>
    </div>
  </section>  
</template>

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

export default Vue.extend({
  name: 'Section',
  props: {
    backgroundColor: {
      type: String
    },
    backgroundImage: {
      type: String
    },
    color: {
      type: String
    }
  },
  computed: {
    _backgroundImage():string {
        return this.backgroundImage
    },
    _backgroundColor():string {
        return this.backgroundColor
    },
    _color():string {
        return this.color
    },
    _class():string {
      if (this.backgroundImage === undefined || this.backgroundImage === null) {
        return ''
      } else {
        return 'section_bg'
      } 
    }
  }
})
</script>

<style>
section{
  width: 100%;
  float: left;
  padding: 60px 0;
}
</style>
