<template>
  <button
    class="afin-button"
    :style="{ color: computedColor, '--themeColor': themeColor }"
    @click="handleClick"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "primary"
    },
    themeColor: {
      type: String,
      default: "#447bdb"
    }
  },
  computed: {
    computedColor() {
      return this.type === "primary" ? "#fff" : "#447bdb";
    }
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.afin-button {
  padding: 9px 24px;
  border: 1px solid var(--themeColor);
  background: var(--themeColor);
  border-radius: 4px;
  cursor: pointer;
}
</style>
