<template>
  <div
    class="tag flex justify-center text-2xs px-3 py-1 rounded-md"
    :class="!active ? 'bg-opacity-0 border' : ''"
    @click="tagOnclick"
  >
    {{ text }}
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "AppTag",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      required: true,
    },
    text: {
      type: String,
      required: true,
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    tagOnclick() {
      if (this.disabled === false) {
        this.$emit("onclick", {
          id: this.id,
          text: this.text,
        });
      }
    },
  },
});
</script>

