<script setup lang="ts">
withDefaults(defineProps<{title:string;count?:number;countUnit?:string;description?:string}>(),{countUnit:'건'})
</script>
<template><header class="kbx-section-header"><div><h2>{{title}}<span v-if="count!=null"> {{count.toLocaleString('ko-KR')}}{{countUnit}}</span></h2><p v-if="description">{{description}}</p></div><div class="kbx-section-header__actions"><slot name="actions"/></div></header></template>
<style scoped>.kbx-section-header{min-height:var(--kbx-control-md);display:flex;align-items:center;justify-content:space-between;gap:var(--kbx-space-3);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border)}.kbx-section-header h2{margin:0;font-size:var(--kbx-font-lg);font-weight:600}.kbx-section-header h2 span{font-size:var(--kbx-font-sm);color:var(--kbx-color-text-muted);font-weight:500}.kbx-section-header p{margin:var(--kbx-space-1) 0 0;color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}.kbx-section-header__actions{display:flex;gap:var(--kbx-space-1)}</style>
