<script setup lang="ts">
import type { KbxQuickFilterItem } from '@kbx/contracts'
defineProps<{items:KbxQuickFilterItem[];ariaLabel?:string}>();const emit=defineEmits<{ select:[string] }>()
</script>
<template><nav class="kbx-quick-filter" :aria-label="ariaLabel??'빠른 필터'"><button v-for="item in items" :key="item.key" type="button" :class="{active:item.active}" :data-tone="item.tone??'default'" :aria-pressed="item.active??false" @click="emit('select',item.key)"><span>{{item.label}}</span><strong>{{item.count.toLocaleString('ko-KR')}}</strong></button></nav></template>
<style scoped>.kbx-quick-filter{display:flex;align-items:stretch;min-height:var(--kbx-home-attention-height);border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface)}.kbx-quick-filter button{min-width:6.875rem;display:flex;align-items:center;justify-content:space-between;gap:var(--kbx-space-3);border:0;border-right:var(--kbx-border-width) solid var(--kbx-color-border);background:transparent;padding:0 var(--kbx-space-3);text-align:left}.kbx-quick-filter button:last-child{border-right:0}.kbx-quick-filter button:hover,.kbx-quick-filter button.active{background:var(--kbx-color-surface-hover)}.kbx-quick-filter span{font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}.kbx-quick-filter strong{font-size:var(--kbx-font-md)}.kbx-quick-filter button[data-tone="warning"] strong{color:var(--kbx-color-warning-text)}.kbx-quick-filter button[data-tone="danger"] strong{color:var(--kbx-color-danger)}</style>
