<script setup lang="ts">
import { messages } from '../lib/messages'

defineProps<{ suggestions: readonly string[] }>()
defineEmits<{ pick: [suggestion: string] }>()
</script>

<template>
  <div class="chips" role="region" :aria-label="messages.suggestionChipsRegionLabel">
    <button
      v-for="suggestion in suggestions"
      :key="suggestion"
      class="chip"
      type="button"
      @click="$emit('pick', suggestion)"
    >
      {{ suggestion }}
    </button>
  </div>
</template>

<style scoped>
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.chip {
  padding: var(--s-3) 15px;
  color: var(--c-text-chip);
  font-size: var(--t-small);
  white-space: nowrap;
  cursor: pointer;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: all var(--dur-fast) ease;
}

.chip:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  transform: translateY(-1px);
}
</style>
