<script setup lang="ts">
const props = defineProps<{
  filters: Array<{ label: string; value: string; active?: boolean }>
}>()
const emit = defineEmits<{ toggle: [value: string] }>()
</script>

<template>
  <div class="filter-chips">
    <button
      v-for="f in props.filters"
      :key="f.value"
      class="tag-chip"
      :class="{ active: f.active }"
      @click="emit('toggle', f.value)"
    >
      {{ f.label }}
    </button>
  </div>
</template>

<style scoped>
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.tag-chip {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
  line-height: 1.25;
}
</style>
