<template>
  <Stack direction="row" gap="2" wrap>
    <Pill
      v-for="filter in filters"
      :key="filter.id"
      :variant="filter.id === modelValue ? 'primary' : 'outline'"
      class="cursor-pointer"
      @click="$emit('update:modelValue', filter.id)"
    >
      {{ filter.label }}
    </Pill>
  </Stack>
</template>

<script setup lang="ts">
interface Filter {
  id: string
  label: string
}

defineProps<{
  filters: Filter[]
  modelValue: string
}>()

defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>
