<template>
    <div class="cursor-pointer ml-4">
        <select
            id="dropdown"
            @change="onChange(selectedValue)"
            v-model="selectedValue"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue focus:border-blue block w-auto max-w-full py-1.5 pl-3 pr-10"
            :class="py">
            <option
                v-for="item in options"
                :key="item.value"
                :value="item.value">
                {{ item.label }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    name: "DropDown",
    props: {
        options: {
            type: Array,
            default: () => []
        },
        onChange: {
            type: Function,
            default: () => {}
        },
        selected: {
            type: String,
            default: ''
        },
        py: {
            type: String,
            default: 'py-2'
        },
    },
    data() {
        return {
            selectedValue: this.selected || this.options[0].value
        }
    },
}
</script>