<script setup lang="ts">
import type { KbxWorkQueueCounter } from '@kbx/contracts'

defineProps<{ counters: KbxWorkQueueCounter[]; activeKey?: string | null }>()
const emit = defineEmits<{ select: [string | null] }>()
</script>

<template>
  <div class="kbx-exception-summary" aria-label="업무 예외 요약">
    <button
      v-for="counter in counters"
      :key="counter.key"
      type="button"
      class="kbx-exception-summary__item"
      :class="{ active: activeKey === counter.key }"
      :data-severity="counter.severity ?? 'info'"
      @click="emit('select', activeKey === counter.key ? null : counter.key)"
    >
      <span class="label">{{ counter.label }}</span>
      <strong>{{ counter.count.toLocaleString('ko-KR') }}</strong>
    </button>
  </div>
</template>

<style scoped>
.kbx-exception-summary{display:flex;flex-wrap:wrap;gap:var(--kbx-space-2)}
.kbx-exception-summary__item{display:grid;grid-template-columns:auto minmax(var(--kbx-control-md),auto);align-items:center;gap:var(--kbx-space-2);min-height:var(--kbx-control-lg);padding:var(--kbx-space-1) var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);color:var(--kbx-color-text);cursor:pointer}
.kbx-exception-summary__item:hover, .kbx-exception-summary__item.active { border-color:var(--kbx-color-primary); background:var(--kbx-color-surface-hover); }
.kbx-exception-summary__item[data-severity="critical"] strong { color:var(--kbx-color-danger); }
.kbx-exception-summary__item[data-severity="warning"] strong { color:var(--kbx-color-warning); }
.label{font-size:var(--kbx-font-sm)}
strong{font-size:var(--kbx-font-lg);text-align:right}
</style>
