<template>
  <button type="button" class="flex items-center justify-center cursor-pointer"
    :disabled="disabled" :class="buttonClasses" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: "transparent",
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    buttonClasses() {
      return {
        "transparent": this.color === "transparent",
      };
    }
  },
  methods: {
    handleClick($ev) {
      if (this.disabled) {
        $ev.stopPropagation();
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.transparent {
  background: transparent;
  padding: 1rem;
  border: 1px solid $color-button;
  border-radius: 12px;
  color: $color-button;
  width: fit-content;
  text-transform: uppercase;
  &:hover {
    background: $color-button;
    color: white;
  }
}

</style>