<template>
  <div class="suggested-questions" v-if="suggestions.length">
    <div class="suggestions-label">建议问题</div>
    <div class="suggestions-list">
      <a-tag
        v-for="(q, idx) in suggestions"
        :key="idx"
        class="suggestion-tag"
        color="blue"
        @click="$emit('select', q)"
      >
        {{ q }}
      </a-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  suggestions: string[]
}>()

defineEmits<{
  select: [question: string]
}>()
</script>

<style scoped lang="less">
.suggested-questions {
  padding: 8px 16px 12px;
}

.suggestions-label {
  font-size: 12px;
  color: #8c8c8c;
  margin-bottom: 8px;
}

.suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-tag {
  cursor: pointer;
  border-radius: 12px;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    opacity: 0.8;
  }
}
</style>
