<template>
  <div>
    <span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">CRITÈRES RÉGÉ</span>
    <div class="flex flex-wrap gap-1">
      <button
        v-for="critere in CRITERES"
        :key="critere.id"
        type="button"
        class="px-2 py-0.5 rounded-full text-xs transition-all"
        :style="modelValue.includes(critere.id)
          ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
          : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
        @click="toggle(critere.id)"
      >
        {{ critere.label }}
        <span v-if="counts && counts[critere.id] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[critere.id] }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CRITERES } from '~/types/pratique'

const props = defineProps<{
  modelValue: number[]
  counts?: Record<number, number>
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number[]]
}>()

function toggle(id: number) {
  if (props.modelValue.includes(id)) {
    emit('update:modelValue', props.modelValue.filter(v => v !== id))
  } else {
    emit('update:modelValue', [...props.modelValue, id])
  }
}
</script>
