<template>
  <select
    :value="modelValue"
    class="select select-bordered select-sm w-full max-w-xs"
    @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
  >
    <option
      v-for="filter in filters"
      :key="filter.id"
      :value="filter.id"
    >
      {{ filter.label }}
    </option>
  </select>
</template>

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

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

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