<script>
import { mapGetters } from "vuex";

export default {
    name: "LoginDropdown",
    computed: {
        ...mapGetters("login", ["opcionesLogin", "estilos"])
    },
    data() {
        return {
            dropdownActivo: false
        };
    },
}
</script>

<template>
    <div class="buttons is-right">
        <div class="dropdown" :class="{'is-active': dropdownActivo}" @mouseleave="dropdownActivo = false">
            <div class="dropdown-trigger">
                <button class="button"
                        aria-haspopup="true"
                        aria-controls="dropdown-menu"
                        type="button"
                        @click="dropdownActivo = !dropdownActivo">
                    <span class="icon is-small">
                        <i class="fa fa-solid fa-user-check"></i>
                    </span>
                    <span>Cambiar login</span>
                    <span class="icon is-small">
                        <i class="fas fa-angle-down" aria-hidden="true"></i>
                    </span>
                </button>
            </div>
            <div class="dropdown-menu" role="menu">
                <div class="dropdown-content">
                    <a class="dropdown-item" v-for="opcion in opcionesLogin" :href="opcion.href">
                        {{ opcion.nombre }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>