<script setup lang="ts">
defineProps<{
  tag: string;
  dismissible?: boolean;
}>();

defineEmits<{
  click: [tag: string];
  dismiss: [tag: string];
}>();
</script>

<template>
  <span class="tag-pill" @click="$emit('click', tag)">
    #{{ tag }}
    <button
      v-if="dismissible"
      class="dismiss"
      @click.stop="$emit('dismiss', tag)"
      aria-label="Remove tag"
    >
      &times;
    </button>
  </span>
</template>

<style scoped>
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--fs-accent-soft);
  color: var(--fs-accent);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.tag-pill:hover {
  color: var(--fs-accent);
  background: var(--fs-accent-soft);
}
.dismiss {
  background: none;
  border: none;
  color: var(--fs-accent);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.1rem;
  opacity: 0.7;
}
.dismiss:hover {
  opacity: 1;
}
</style>
