<template>
  <div :class="`banner banner__${position}`" :style="bannerStyles">
    <slot name="title"><h1>This hot component realoding works!</h1></slot>
    <slot>This my default Text</slot>
  </div>
</template>
<script>
const defaultStyles = {
  left: 0,
  right: 0
}
export default {
  props: {
    position: {
      type: String,
      default: 'bottom',
      validator (position) {
        return ['top', 'bottom', 'left'].indexOf(position) > -1
      }
    },
    styles: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      bannerStyles: {
        ...defaultStyles,
        ...this.styles
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .banner {
    padding: 12px;
    background-color: #fcf6cd;
    color: #f6a623;
    text-align: left;
    position: fixed;
    z-index: 2;
  }
  .banner__top {
    top: 80px;
  }
  .banner__bottom {
    bottom: 0;
  }
</style>
