<template>
    <div class="buttons" :class="{'is-right': isRight}">
        <div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
            <div class="dropdown-trigger">
                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="dropdownActivo = !dropdownActivo">
                    <span class="icon is-small"><i class="fas fa-download"/></span>
                    <span>{{ placeholder }}</span>
                    <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"/></span>
                </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu" role="menu">
                <div class="dropdown-content">
                    <a class="dropdown-item"
                       v-for="(opcion,i) in opciones"
                       :key="i"
                       :href="opcion.href">
                        {{ opcion.nombre }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Dropdown",
    props: {
        placeholder: {
            type: String,
            required: true,
        },
        opciones: {
            type: Array,
            required: true,
        },
        isRight: {
            type: Boolean,
            required: false,
            default: true,
        }
    },
    data() {
        return {
            dropdownActivo: false
        }
    },
}
</script>

<style>
</style>
