<script setup lang="ts" generic="T extends string">
// 세그먼트 토글(필터/탭) 공용 컴포넌트 — 전역 .segmented 스타일을 그대로 사용.
// options 의 count 가 있으면 라벨 뒤에 수량(.n)을 표기한다.
interface SegOption {
  value: T
  label: string
  count?: number
}
defineProps<{ modelValue: T; options: SegOption[] }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: T): void }>()
</script>

<template>
  <div class="segmented">
    <button
      v-for="o in options"
      :key="o.value"
      type="button"
      :class="{ active: o.value === modelValue }"
      @click="emit('update:modelValue', o.value)"
    >
      {{ o.label }}<span
        v-if="o.count !== undefined"
        class="n"
      >{{ o.count }}</span>
    </button>
  </div>
</template>
