<script setup lang="ts">
defineProps<{
    imgWidth?: String,
    fontSize?: String
}>()
</script>

<template>
    <div style="width: fit-content; max-width: 100%; overflow: hidden;">
    <NuxtLink style="display: flex; width: fit-content; text-decoration: none;" to="/">
    <img id="logo-img" alt="BuildPath" :width="imgWidth == null ? '120' : Number(imgWidth)" src="~/assets/img/buildpath-high-resolution-logo-transparent.png" />
    <h1 :style="'font-size: ' + (fontSize == null ? '5.0rem' : fontSize) + ';'" id="logo-text">BuildPath</h1>
    </NuxtLink>
    </div>
</template>

<style>
#logo-text {
    font-weight: 200; 
    align-content: center; 

    margin-left: 20px;
    
    user-select: none;
    text-decoration: none;
}
#logo-img {
    user-select: none;
}

@media only screen and (max-width: 550px) {
    #logo-text {
        margin-left: 10px;
    }
    #logo-img {
        max-width: 80px;
        max-height: 103px;
        height: fit-content;
    }
}
</style>