<template>
    <div>
        <label
            :for="id"
            class="block mb-2 text-sm"
            :class="userInputValid ? 'font-medium text-gray-900' : 'font-bold text-red'">{{ label }}</label>
        <select
            :id="id"
            @change="$emit('update:selected', $event.target.value)"
            class=" border border-gray-500 text-gray-900 text-sm rounded-lg block w-full p-2.5"
            :class="userInputValid ? 'bg-slate-50 focus:ring-blue focus:border-blue' : 'border-red bg-rose-50 ring-1 ring-red ring-inset focus:ring-red focus:border-red focus:ring-inset'">
        <option
                disabled
                selected
                value />
            <option
                v-for="item in options"
                :key="item[optionsKey]"
                :value="item[optionsValue]"
                :selected="item[optionsValue] === selected">
                {{ item[optionsDescr] }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    name: 'DropDown2',
    emits: ['update:selected'],
    props: {
        id: {
            type: String,
            default: '',
            required: true
        },
        label: {
            type: String,
            default: ''
        },
        selected: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: () => []
        },
        optionsKey: {
            type: String,
            default: 'key'
        },
        optionsValue: {
            type: String,
            default: 'value'
        },
        optionsDescr: {
            type: String,
            default: 'descr'
        },
        userInputValid: {
            type: Boolean,
            default: true
        }
    },
}
</script>