<script
    setup
    lang="ts"
>
    const { route = "" } = defineProps<{
        iconImageSource: string,
        name: string,
        route?: string,
    }>();

    const onClickExternalShortcut = () => {
        window.open(route, '_blank')?.focus();
    }
</script>

<template>
    <div
        class="full-width cursor-pointer rounded-50 link-btn shadow-4"
        @click="onClickExternalShortcut"
    >
        <div class="row items-center q-px-lg q-py-xs rounded-50">
            <span class="col text-uppercase text-bold">
                {{ name }}
            </span>

            <q-icon
                round
                color="accent"
                size="md"
                :name="iconImageSource"
                class="col-auto"
            />
        </div>
    </div>
</template>

<style
    scoped
    lang="css"
>
.link-btn {
    background-color: var(--q-dark);
    border: 2px solid var(--q-accent);
}

.link-btn:hover {
    background-color: var(--q-accent2);
}
</style>