<template lang="pug">
button._button(
  v-on="$listeners"
  :class="className"
  :disabled="disabled"
)
  slot
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "primary", // primary plain
    },

    size: {
      type: String,
      default: "medium", // font size: medium
    },

    shape: {
      type: String,
      default: "round", // round square
    },

    disabled: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    className() {
      return `
        _button--${ this.type }
        _button--${ this.size }
        _button--${ this.shape }
        _button--${ this.disabled ? "disabled" : "" }
      `
    },
  },
}
</script>

<style lang="stylus">
._button
  text-align: center
  border: none
  cursor: pointer

._button--disabled
  opacity: 0.55

._button--primary
  background: $main
  color: $white

._button--plain
  color: $main
  border: 1px solid $main
  background: $white
  font-size: $small

._button--round
  border-radius: 999px

._button--medium
  font-size: $medium
</style>
