<template>
  <!-- Renders nothing at all when there is no suggestion, so a list can drop
       this in beside its empty state without an extra v-if of its own. -->
  <p v-if="suggestion" class="search-suggestion">
    Did you mean
    <button type="button" class="linklike" @click="$emit('pick', suggestion)">
      {{ suggestion }}
    </button>?
  </p>
</template>

<script setup>
defineProps({
  suggestion: { type: String, default: null },
})
defineEmits(['pick'])
</script>

<style scoped>
.search-suggestion {
  margin: 0.5rem 0 0;
  color: var(--text-light, #666);
  font-size: 0.9rem;
}

/* A button, not an anchor: it re-runs the search in place rather than
   navigating, and a link that does not link is a lie to anyone using a
   keyboard or a screen reader. */
.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--primary, #0066cc);
  cursor: pointer;
  text-decoration: underline;
}

.linklike:hover {
  text-decoration: none;
}
</style>
