<script setup>
import { computed } from 'vue';
import { hasToken } from '@Services/Api';
import { useRouter } from 'vue-router';

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

/** Props */
const props = defineProps({
    size: {
        type: String,
        default: 'md' // sm, md, lg, xl
    }
});

/** Computed */
const sizeClass = computed(() => {
    const sizes = {
        'sm': 'h-12',
        'md': 'h-16',
        'lg': 'h-20',
        'xl': 'h-24'
    };
    return sizes[props.size] || sizes.md;
});

/** Métodos */
const home = () => {
    if(hasToken()) {
        router.push({ name: 'dashboard.index' });
    } else {
        location.replace('/');
    }
}
</script>

<template>
    <div
        class="flex w-full justify-center items-center space-x-2 cursor-pointer"
        @click="home"
    >
        <img :src="'/Logo-hk.png'" :class="sizeClass" />
    </div>
</template>