<template>
    <ul v-if="show && suggestions.length" class="suggestions-list">
        <li v-for="item in suggestions" :key="item.cpv" @mousedown.prevent="select(item)">
            <span class="cpv-code">{{ item.cpv }}</span> - <span class="cpv-title">{{ item.title }}</span>
        </li>
    </ul>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
    suggestions: {
        type: Array,
        required: true
    },
    show: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['select']);
function select(item) {
    emit('select', item);
}
</script>

<style scoped>
.suggestions-list {
    position: absolute;
    top: 54px;
    left: 0;
    text-align: left;
    z-index: 100;
    background: #fff;
    border: 1px solid #ccc;
    width: 82%;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.suggestions-list li {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.suggestions-list li:hover {
    background: #f5f5f5;
}

.cpv-code {
    font-weight: bold;
    color: #007bff;
}

.cpv-title {
    color: #333;
}
</style>
