<template>
        <div class="text-xs px-3 py-2   text-center cursor-pointer rounded my-3" :class="getSize && border"  @click="eventEmit">
           {{text}}
        </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'AppIcon',
  props: {
    size: String,
    disabled: {
        type:Boolean,
        default:false
    },
    text:{
        type: String,
        required: true
    },
    border:{
        type: String,
        default:'border border-app-dark-4'
    }
  },
  methods:{
      eventEmit(v:any){
          if(this.disabled){
              return
          }
          this.$emit('btnClicked',v)
      }
  },
  computed:{
      getSize(){
          switch (this.size) {
              case 'full':
                    return 'w-full'
              default:
                  return 'w-20';
          }
      }
  }
});
</script>

