<script setup lang="ts">
    const { userFirstName = '', userLastName = '' } = 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>