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

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

<template>
    <div
        class="full-width cursor-pointer bg-dark shadow-2 rounded-15 q-pa-xs position-relative"
        style="border: solid 1px var(--q-accent);"
        @click="onClickExternalShortcut"
    >
        <span
            v-if="$q.platform.is.mobile"
            class="col text-uppercase text-bold text-accent absolute"
            style="transform: translate(20px, -20px);"
        >
            {{ name }}
        </span>

        <div
            class="row items-center q-px-lg q-py-sm link-card rounded-10 inset-shadow"
            :style="`background-image: url(${bgImageSource}); background-size: ${$q.platform.is.mobile ? 'cover' : 'contain'};`"
        >
            <q-icon
                round
                color="dark"
                size="md"
                :name="`img:${iconImageSource}`"
                class="col-auto q-pr-md"
            />

            <span
                v-if="!$q.platform.is.mobile"
                class="col text-uppercase text-bold"
            >
                {{ name }}
            </span>
        </div>
    </div>
</template>

<style
    scoped
    lang="css"
>
.link-card {
    background-blend-mode: multiply;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: var(--q-dark);
    background-size: contain;
}
</style>