<template>
  <div class="search-suggestion">
    <div
      v-for="(item, index) in suggestions"
      :key="index"
      class="suggestion-item"
      @click="handleSelect(item)"
    >
      <span v-html="item"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchSuggestion',
  props: {
    suggestions: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleSelect(keyword) {
      const plainKeyword = keyword.replace(/<em>|<\/em>/g, '');
      this.$emit('select', plainKeyword);
    },
  },
};
</script>

<style scoped lang="less">
.search-suggestion {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      background-color: #f5f5f5;
    }

    :deep(em) {
      color: #00b42a;
      font-style: normal;
    }
  }
}
</style>
