<template>
  <div>
    <!-- Groupe Europe -->
    <span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">PAYS — EUROPE</span>
    <div class="flex flex-wrap gap-1 mb-2">
      <button
        v-for="code in EUROPE_CODES"
        :key="code"
        type="button"
        class="px-2 py-0.5 rounded-full text-xs transition-all"
        :style="modelValue.includes(code)
          ? '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(code)"
      >
        {{ PAYS_LABELS[code] ?? code }}
        <span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
      </button>
    </div>

    <!-- Groupe Outre-mer -->
    <span class="text-xs font-bold uppercase tracking-wide block mb-1.5" style="color: var(--nav-text-muted);">OUTRE-MER</span>
    <div class="flex flex-wrap gap-1">
      <button
        v-for="code in OUTREMER_CODES"
        :key="code"
        type="button"
        class="px-2 py-0.5 rounded-full text-xs transition-all"
        :style="modelValue.includes(code)
          ? '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(code)"
      >
        {{ PAYS_LABELS[code] ?? code }}
        <span v-if="counts && counts[code] !== undefined" class="ml-1 opacity-60 text-xs">{{ counts[code] }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { EUROPE_CODES, OUTREMER_CODES, PAYS_LABELS } from '~/types/pratique'

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

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

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