<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import { DefaultButton } from '../../lib'

/**
 * Компонент кнопки для фильтр-бара
 */
export default defineComponent({
  props: {
    /**
     * Счетчик активных фильтров
     */
    counter: {
      type: Number,
      default: 0,
    },
    /**
     * Заголовок кнопки
     */
    label: {
      type: String,
      default: 'Фильтр',
    },
    /**
     * Колбэк-функция клика по кнопке
     */
    onClick: {
      type: Function as PropType<() => void>,
      default: () => () => {
        // do nothing
      },
    },
  },
  setup(props) {
    return () => (
      <div class="ark-ui-filterbar-button" onClick={props.onClick}>
        <DefaultButton label={props.label} type='secondary' icon='filter' />
        {Boolean(props.counter) && <div class="ark-ui-filterbar-button-counter">{props.counter}</div>}
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
@import './styles.scss';
</style>
