<template>
  <button
    type="button"
    :aria-label="label"
    :class="classes"
    @click="onClick"
    :style="style"
  >
    <slot>{{ label }}</slot>
  </button>
</template>

<script>
import "../../../dist/components/Buttons.css";

export default {
  name: "sui-btn",

  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "medium",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  computed: {
    classes() {
      return {
        button: true,
        "button--primary": this.primary,
        "button--secondary": !this.primary,
        [`button--${this.size}`]: true,
        "button--circle": this.circle,
        [`h-${this.size}`]: this.circle,
        [`w-${this.size}`]: this.circle,
      };
    },
    style() {
      return {
        backgroundColor: this.backgroundColor,
      };
    },
  },

  methods: {
    onClick() {
      this.$emit("onClick");
    },
  },
};
</script>
