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

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

<template>
    <q-card
        class="shortcut-card cursor-pointer"
        @click="onClickExternalShortcut"
    >
        <q-img
            :src="imageSource"
            fit="contain"
        >
            <div class="absolute-bottom text-uppercase text-weight-bolder text-center">{{ title }}</div>
        </q-img>

        <q-card-section v-if="description">
            <span>{{ description }}</span>
        </q-card-section>
    </q-card>
</template>

<style
    lang="sass"
    scoped
>
.shortcut-card
  width: 100%
  max-width: 250px
</style>