<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue'
import { useRouter } from 'vue-router';

/** Definidores */
const router = useRouter();

/** Propiedades */
const props = defineProps({
    name: String,
    icon: String,
    route: Object,
    active: Boolean,
})

/** Métodos */
const handleClick = () => {
    if (props.active) {
        return;
    }

    router.push(props.route);
}
</script>

<template>
    <button
        v-if="!active"
        :to="route"
        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1 cursor-pointer"
        @click="handleClick"
    >
            <GoogleIcon
                :name="icon"
                class="text-sm"
            />
            <span class="text-sm font-semibold hover:underline" v-text="name" />
    </button>
    <span v-if="!active" class="inline-block text-sm select-none pointer-events-none opacity-50">
        <GoogleIcon
            name="arrow_forward_ios"
            class="text-xs font-semibold"
        />
    </span>
    <div
        v-if="active"
        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1"
    >
        <GoogleIcon
            :name="icon"
            class="text-sm"
        />
        <span class="font-semibold text-sm underline" v-text="name" />
    </div>
</template>