<template>
  <div class="filter-tag flex-display-center">
    <span>{{ label }}</span>
    <button class="tag-remove flex-display-center" @click="emit('remove')">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="18" y1="6" x2="6" y2="18" />
        <line x1="6" y1="6" x2="18" y2="18" />
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  label: string
}>()

const emit = defineEmits<{
  remove: []
}>()
</script>

<style scoped>
.filter-tag {
  gap: 4px;
  padding: 2px 8px;
  background-color: var(--bg-black-2);
  border-radius: var(--radius-4);
  font-size: 14px;
  color: var(--text-primary-80-color);
}

.tag-remove {
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-primary-50-color);
  transition: color 0.2s;
}

.tag-remove:hover {
  color: var(--text-primary-80-color);
}

.icon {
  width: 12px;
  height: 12px;
}
</style>
