<template>
  <div>
    <img
      v-if="logo === 'kundenportal'"
      v-frame-h="25.58"
      v-frame-w="186.95"
      v-frame-x="26"
      v-frame-y="136"
      src="~/assets/images/desktop/common/header/kundenportal-logo.png"
      class="absolute"
    />
    <img
      v-else-if="logo === 'wuestenrot'"
      v-frame-h="26"
      v-frame-w="172"
      v-frame-x="26"
      v-frame-y="136"
      src="~/assets/images/desktop/common/header/wuestenrot-logo.png"
      class="absolute"
    />
    <img
      v-else-if="logo === 'wuerttembergische'"
      v-frame-h="28"
      v-frame-w="295.87"
      v-frame-x="26"
      v-frame-y="134.5"
      src="~/assets/images/desktop/common/header/wuerttembergische-logo.png"
      class="absolute"
    />

    <NuxtLink v-if="profilLink" v-frame-h="32" v-frame-w="88" v-frame-x="1254.5" v-frame-y="132.5" :to="profilLink">
      <img src="~/assets/images/desktop/common/header/profil-button.png" />
      <Spot />
    </NuxtLink>
    <img
      v-else
      v-frame-h="32"
      v-frame-w="88"
      v-frame-x="1254.5"
      v-frame-y="132.5"
      src="~/assets/images/desktop/common/header/profil-button.png"
      class="absolute"
    />

    <img
      v-frame-h="32"
      v-frame-w="119"
      v-frame-x="1358"
      v-frame-y="132.5"
      src="~/assets/images/desktop/common/header/abmelden-button.png"
      class="absolute"
    />
  </div>
</template>

<script lang="ts" setup>
defineProps({
  /**
   * The logo to display in the header.
   *
   * @default 'kundenportal'
   */
  logo: {
    type: String as PropType<'kundenportal' | 'wuestenrot' | 'wuerttembergische'>,
    default: 'kundenportal',
  },

  /**
   * Path for the `profil` page.
   *
   * @default '/profil'
   */
  profilLink: {
    type: [String, null],
    default: '/profil',
  },
})
</script>
