<template>
    <div class='tag flex justify-center text-2xs px-3 py-1 rounded-md' 
    :class="tagActive?'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
    },
    clickable:{
      type:Boolean,
      default: true
    }
  },
  data(){
    return{
      tagActive:this.active
    }
  },
  methods:{
    tagOnclick(){
        if(this.clickable){
          if(this.disabled===false){
            this.tagActive = !this.tagActive;
            this.$emit('onclick', {
            id:this.id,
            text:this.text,
            picked: !this.tagActive
          })
        }

      }

    }
  },

});
</script>

