<script
    setup
    lang="ts"
>
    defineProps<{
        userFirstName: string;
        userLastName: string;
    }>();
</script>

<template>
    <q-img
        src="src/assets/profile_header_default.png"
        height="15vh"
        :width="$q.screen.lt.md ? '80vw' : '40vw'"
        class="rounded-5 q-mb-md shadow-2 col-auto"
        fit="cover"
    >
        <div
            class="absolute-bottom text-h5 text-uppercase text-weight-bolder"
            style="line-height: 0.8em;"
        >{{ userFirstName }}  {{ userLastName }}</div>
    </q-img>
</template>