<template>
  <a
    :href="href"
    :id="id"
    class="flex text-sm"
    :class="[
      classes,
      textColor,
      disabled
        ? 'cursor-not-allowed opacity-50'
        : 'cursor-pointer hover:underline',
    ]"
    :aria-disabled="disabled"
    @click="handleClick"
    ><c-icon
      v-if="icon"
      :type="icon.type"
      :class="icon.class"
      :name="icon.name"
      :viewBox="icon.viewBox"
      :cursorType="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
    ></c-icon>
    {{ label }}
  </a>
</template>
<script>
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CAnchorTag",
  components: {
    CIcon,
  },
  props: {
    href: {
      type: String,
    },
    label: {
      type: String,
    },
    icon: {
      type: Object,
    },
    id: {
      type: String,
    },
    classes: {
      type: String,
    },
    action: {
      type: Function,
    },
    color: {
      type: String,
      default: "blue",
    },
    preferredTextColor: {
      type: String,
      default: "text-indigo-600",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClick(event) {
      event.preventDefault();
      if (this.disabled) return;
      if (this.action) this.action();
    },
  },
  computed: {
    textColor() {
      if (this.color === "red") {
        return "text-red-800";
      } else if (this.color == "blue") {
        return "text-indigo-600";
      } else {
        return this.preferredTextColor;
      }
    },
  },
};
</script>
