<template>
    <div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
        {{ data.email }}
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
    name: "Account",
    components: {},
    props: {
        data: { mail: String, id: Number },
    },
    computed: {
        ...mapState(["activeAccount"]),
    },
    methods: {
        ...mapMutations(["setactiveAccount"]),
    },
};
</script>

<style scoped>
.container {
    width: 65px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    padding: 5px;
    margin: 3px 0;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid transparent;
}

.container:hover {
    background-color: aqua !important;
}

.active {
    border: 2px solid white;
    opacity: 0.9;
}
</style>
