<!-- Кнопка открытия фильтра со счётчиком активных фильтров -->
<template>
  <UiBtn
    :size="size"
    :theme="theme"
    :title="t('filter')"
    class="filter-btn"
    aria-label="Filter"
    @click="emit('update:modelValue', true)"
  >
    <UiIcon
      name="adjustments-horizontal"
      size="16"
    />
    <span class="_from-sm">{{ t('filter') }}
    </span>
    <span
      v-if="count > 0"
      class="filter-btn__count"
    >{{ mobileCount }}</span>
  </UiBtn>
</template>

<script setup lang="ts">
import type { ButtonSizes, ButtonThemes } from '../../types';

const props = defineProps<{
  count: number
  modelValue: boolean
  size?: ButtonSizes
  theme?: ButtonThemes
}>();

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: boolean): void
}>();

const { t } = useI18n();

const mobileCount = computed(() => props.count > 9 ? '9+' : props.count);
</script>

<style lang="scss">
.filter-btn.ui-btn {
  @include to-br(sm) {
    position: relative;
  }
}

.filter-btn__count {
  @include font-xs;

  display: grid;
  place-content: center;
  min-width: 20px;
  font-weight: 700;
  background-color: $filter-button-count-bg;
  color: $filter-button-count-text;
  border-radius: 4px;
  height: 100%;
}

.filter-btn__icon.--open {
  transform: scale(-1);
}
</style>
