<template>
    <a
        v-if="linkType === 'navigation'"
        class="navigation-link"
        :href="href"
        @click="handleClick">
        {{ text }}<slot name="after-text"></slot>
    </a>
    <a
        v-else-if="linkType === 'footer'"
        class="footer-link"
        :href="href"
        target="_blank"
        @click="handleClick">
        {{ text }}<slot name="after-text"></slot>
    </a>
    <a
        v-else-if="linkType === 'textSmall'"
        class="small"
        :href="href"
        @click="handleClick">
        {{ text }}<slot name="after-text"></slot>
    </a>
    <a v-else-if="linkType === 'text'" :href="href" @click="handleClick">
        {{ text }}<slot name="after-text"></slot>
    </a>
    <a
        v-else-if="linkType === 'newWindowLink'"
        class="new-window-link"
        :href="href"
        target="_blank"
        @click="handleClick"
        >{{ text }}<slot name="after-text"></slot
    ></a>
</template>

<script>
export default {
    name: 'text-link',
    props: {
        linkType: String,
        text: String,
        href: {
            type: String,
        },
    },
    emits: ['click-event'],
    methods: {
        handleClick() {
            this.pushEventToGA(
                this.$route.query[this.queryStrings.ISS_PAGE],
                this.GaActions.CLICKED,
                this.text,
                true
            );
            this.$emit('click-event');
        },
    },
};
</script>

<style lang="scss" scoped>
a {
    color: $blue;
    text-underline-offset: 5px;
    line-height: 2;
    padding: 0 0 4px 0;
    font-weight: 500;
    max-width: fit-content;
    &:hover {
        color: $blue-700;
    }
    &.small {
        line-height: 24px;
        &:hover {
            color: $blue-700;
        }
    }
    &.navigation-link,
    &.new-window-link {
        color: $black;
        line-height: 26px;
        white-space: nowrap;
        align-items: center;
    }
    &.footer-link {
        color: $gray-600;
        text-decoration: none;
        line-height: 20px;
        padding: 0 0 2px 0;
        font-weight: 400;
        font-size: 0.75rem;
        &:hover {
            padding: 0 0 2px 0;
            text-decoration: underline;
        }
    }
}
</style>
