<template>
  <button class="lanaya-button" :class="buttonCss" @click="clickHandler($event)">
    <span class="lanaya-button-label">
      <slot></slot>
    </span>
  </button>
</template>

<script>
const BUTTON_COLOR = ['primary', 'danger', 'success', 'info', 'warning'];
const BUTTON_SIZE = ['xsmall', 'small', 'normal', 'large', 'xlarge'];
export default {
  name: 'LButton',
  computed: {
    buttonCss: function () {
      let classes = [];
      if (BUTTON_COLOR.includes(this.status)) {
        classes.push(`lanaya-button--${this.status}`);
      } else {
        classes.push(`lanaya-button--primary`);
      }
      if (this.outline) {
        classes.push(`is-outline`);
      }
      if (BUTTON_SIZE.includes(this.size)) {
        classes.push(`lanaya-button--${this.size}`);
      }
      return classes.join(' ');
    }
  },
  methods: {
    clickHandler ($event) {
      this.$emit('click', $event);
    }
  },
  props: {
    outline: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'normal'
    }
  }
};
</script>
