<template>
  <button
    :class="classObject"
    :disabled="disabled"
    @click="click"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'CuButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    rounded: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classObject () {
      return {
        primary: this.type === 'primary',
        secondary: this.type === 'secondary',
        large: this.size === 'large',
        medium: this.size === 'medium',
        small: this.size === 'small',
        extrasmall: this.size === 'extrasmall',
        carrot: this.color === 'carrot',
        green: this.color === 'green',
        blue: this.color === 'blue',
        indigo: this.color === 'indigo',
        yellow: this.color === 'yellow',
        tomato: this.color === 'tomato',
        gray: this.color === 'gray',
        rounded: this.rounded
      }
    }
  },
  methods: {
    click (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/Button.scss";
</style>
