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

// Component name must be multi-word
defineOptions({
  name: 'AppLogo'
})
</script>

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