<script setup lang="ts">
import AppBadge from './common/AppBadge.vue'

defineProps<{ tag: string; deletable?: boolean }>()
defineEmits<{ deleted: [] }>()
</script>
<template>
  <AppBadge>
    <span class="tag-label-hashtag">#</span>
    {{ tag }}
    <font-awesome-icon
      v-if="deletable"
      icon="fa-x"
      class="tag-label-delete"
      @click="$emit('deleted')"
    ></font-awesome-icon>
  </AppBadge>
</template>
<style lang="css">
.tag-label-hashtag {
  color: var(--text-muted);
  margin-right: -0.2rem;
}

.tag-label-delete {
  color: var(--text-muted);
  cursor: pointer;
}
</style>
