<template>
  <div class="space-y-1">
    <p class="filter-label">ÉCHELLE</p>
    <div class="chips-row">
      <span
        v-for="option in ECHELLES"
        :key="option"
        class="chip"
        :style="isSelected(option)
          ? '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(option)"
      >{{ option }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const ECHELLES = ['National', 'Régional', 'Local'] as const

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

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

function isSelected(option: string): boolean {
  return props.modelValue.includes(option)
}

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

<style scoped>
.filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nav-text-muted);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.chip {
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  transition: all 0.15s;
  user-select: none;
}
</style>
