<script setup lang="ts">
// 现有分组提示行:点击 chip 将分组名填入外部输入框;无分组时整行不渲染
defineProps<{ groups: string[] }>()
defineEmits<{ pick: [group: string] }>()
</script>

<template>
  <div v-if="groups.length" class="mt-1.5 flex flex-wrap items-center gap-1.5">
    <span class="text-xs text-ink-3">现有分组:</span>
    <button
      v-for="g in groups"
      :key="g"
      type="button"
      class="cursor-pointer rounded-[5px] border border-line bg-card px-2 py-0.5 text-xs text-ink-2 hover:border-accent hover:text-accent"
      @click="$emit('pick', g)"
    >
      {{ g }}
    </button>
  </div>
</template>
