<!-- Чипсы активных фильтров с кнопкой сброса -->
<template>
  <UiExpandRow v-if="items.length > 0">
    <template #prepend>
      <slot/>
    </template>
    <UiChips
      v-for="(item, index) in items"
      :key="index"
      :index="`s-filter-page-chips${index}`"
      :item="item"
      class="filter-chips"
      with-close
      @click="onChipsClick(item)"
    />
  </UiExpandRow>
</template>

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

defineProps<{
  items: IChipsItem[]
}>();

const emit = defineEmits<{
  (eventName: 'click', eventValue: IChipsItem): void
}>();

function onChipsClick(item: IChipsItem) {
  emit('click', item);
}
</script>

<style lang="scss">
.filter-chips {
  @include font-sm;

  border-radius: $radius-lg;
  border: 1px solid $filter-chips-border;
  background-color: $filter-chips-bg;
  pointer-events: all;
  color: $filter-chips-text;

  @include hover(background-color) {
    background-color: $filter-chips-bg--hover;
  }
}

.filter-chips .ui-chips__close {
  pointer-events: all;
  color: $filter-chips-close;

  @include hover(opacity) {
    opacity: 0.9;
  }
}
</style>
