<template>
    <div class="item-card" @click.prevent="clicked" :id="id">
        <el-tooltip :content="label" placement="right-start" effect="light" popper-class="menu-tooltip"
            :disabled="!collapsed || hide_tooltip">
            <div :class="`display-flex ${collapsed ? 'column justify-content-center ' : 'row'
            } align-items-center flex-grow-1`">
                <Icon :color="icon_color" :name="label" />
                <label v-if="!collapsed">{{ label }}</label>
                <label v-else>{{ short_label ? short_label : label }}</label>
                <Icon v-if="icon_end_name" :color="icon_color" :name="icon_end_name" />
            </div>
        </el-tooltip>
    </div>
</template>
<script>
import Icon from '../../Icons/Icon.vue';

export default {
    props: ['collapsed', 'label', 'index', "id", "short_label", "hide_tooltip", "icon_color", "icon_end_name"],
    components: {
        Icon
    },
    methods: {
        clicked() {
            if (this.index != undefined) {
                this.$emit('clicked', this.index);
            }
        },
    },
};
</script>
<style lang="scss">
@import './styles.scss';
</style>
