<template>
  <div class="filters">
    <ProjectSelector @change="$emit('project-change')" />
    <div class="filter-divider"></div>
    <button 
      class="filter-tag"
      :class="{ active: modelValue === null }"
      @click="$emit('update:modelValue', null)"
    >
      Все
    </button>
    <button 
      v-for="dept in store.departments" 
      :key="dept.id"
      class="filter-tag"
      :class="{ active: modelValue === dept.id }"
      @click="$emit('update:modelValue', modelValue === dept.id ? null : dept.id)"
    >
      {{ dept.name_departments }}
    </button>
  </div>
</template>

<script setup>
import ProjectSelector from './ProjectSelector.vue'
import { useProjectsStore } from '../stores/projects'

const store = useProjectsStore()

defineProps({
  modelValue: {
    type: Number,
    default: null
  }
})

defineEmits(['update:modelValue', 'project-change'])
</script>

<!-- Стили определены в PageLayout.vue через :deep(.filters) -->
