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

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

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

<style scoped>
.frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.frame::after {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: var(--s-3);
  width: var(--s-10);
  pointer-events: none;
  content: '';
  background: linear-gradient(to right, transparent, var(--c-surface-raised));
}

.chips {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-10) var(--s-3) var(--s-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--c-line-strong) transparent;
  scrollbar-width: thin;
}

.chips:focus-visible {
  outline-offset: -3px;
}

.chip {
  flex: none;
  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>
