<template>
    <component :is="component" :href="href" :target="target" class="menu-item" @click="click()">
        <span v-if="iconPath && iconAlign === 'left'" class="left-align-icon">
            <img :src="iconPath" v-if="iconPath">
            {{ title }}
        </span>
        <span v-else-if="iconPath && iconAlign === 'right'" class="right-align-icon">
            {{ title }}
            <img :src="iconPath" v-if="iconPath">
        </span>
        <span v-else>
            {{ title }}
        </span>
    </component>
</template>

<script>
    export default {
        props: {
            title: String,
            iconPath: String,
            iconAlign: {
                type: String,
                default: 'left'
            },
            href: String,
            target: String,
            action: {
                type: Function,
                default: function() {}
            }
        },
        computed: {
            component() {
                return this.href ? "a" : "div";
            }
        },
        methods: {
            click() {
                this.$emit('click')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../scss/constants";


    .menu-item {
        display: block;
        width: 100%;
        font-weight: 600;
        font-size: 12px;
        color: $darkGrey;
        font-family: "aktiv-grotesk", sans-serif;
        padding: 9px;
        cursor: pointer;
        text-transform: uppercase;
        white-space: nowrap;

        &:hover {
            background-color: #E9E9E9;
            text-decoration: none;
        }

        .right-align-icon {
            img {
                float: right;
                margin-top: 5px;
            }
        }
    }
</style>