<template>
  <a
    :disabled="disabled" 
    :class="buttonClasses" 
    :href="href ? href : to" 
    :target="isExternal ? '_blank' : null" 
    rel="noopener noreferrer" 
    @click="handleClick">
    <slot/>
  </a>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: "button",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "md",
    },
    to: {
      type: [String, Object, null],
      default: null,
    },
    href: {
      type: [ String, null],
      default: null,
    },
  },
  computed: {
    isNuxtLink() {
      return !!this.to;
    },
    isExternal() {
      return !!this.href;
    },
    tag() {
      if (this.isNuxtLink) return 'NuxtLink';
      if (this.isExternal) return 'a';
      return 'button';
    },
    buttonClasses() {
      return {
        "px-3.5 py-2 gap-x-2 text-sm cursor-pointer": this.size === "sm",
        "px-5 py-2.5 gap-x-2 text-sm cursor-pointer": this.size === "md",
        "px-6 py-4 gap-x-1 text-base cursor-pointer": this.size === "lg",

        "bg-button hover:bg-button-hover text-white rounded-xl shadow-button":
          this.color === "button" && !this.disabled,
        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
          this.color === "button" && this.disabled,

        "text-button hover:text-button-hover":
          this.color === "only-link" && !this.disabled,
        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
          this.color === "only-link" && this.disabled,

        "bg-aula-base hover:bg-button hover:text-white rounded-xl shadow-button":
          this.color === "aula-base" && !this.disabled,
        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
          this.color === "aula-base" && this.disabled,
      };
    },
  },
  methods: {
    handleClick($ev) {
      if (this.disabled) {
        $ev.stopPropagation();
      }
    },
  },
};
</script>
