<template>
  <div>
    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="198" :to="prefix || '/'">
      <img v-if="active === ''" src="~/assets/images/desktop/common/menu/uebersicht-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/uebersicht-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink
      v-if="hasPostfachLink"
      v-frame-h="56"
      v-frame-w="232"
      v-frame-x="12"
      v-frame-y="254"
      :to="`${prefix}/postfach`"
    >
      <template v-if="postfachBadge">
        <img v-if="active === 'postfach'" src="~/assets/images/desktop/common/menu/postfach-button-active-badge.png" />
        <img v-else src="~/assets/images/desktop/common/menu/postfach-button-badge.png" />
      </template>
      <template v-else>
        <img v-if="active === 'postfach'" src="~/assets/images/desktop/common/menu/postfach-button-active.png" />
        <img v-else src="~/assets/images/desktop/common/menu/postfach-button.png" />
      </template>
      <Spot />
    </NuxtLink>
    <img
      v-else
      v-frame-h="56"
      v-frame-w="232"
      v-frame-x="12"
      v-frame-y="254"
      src="~/assets/images/desktop/common/menu/postfach-button.png"
      class="absolute"
    />

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="310" :to="`${prefix}/vertraege`">
      <img v-if="active === 'vertraege'" src="~/assets/images/desktop/common/menu/vertraege-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/vertraege-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="366" :to="`${prefix}/services`">
      <img v-if="active === 'services'" src="~/assets/images/desktop/common/menu/services-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/services-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="422" :to="`${prefix}/tipps`">
      <img v-if="active === 'tipps'" src="~/assets/images/desktop/common/menu/tipps-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/tipps-button.png" />
      <Spot />
    </NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  /**
   * The prefix for the navigation links.
   *
   * @default ''
   */
  prefix: {
    type: String,
    default: '',
  },

  /**
   * Whether the postfach badge should be shown.
   *
   * @default true
   */
  postfachBadge: {
    type: Boolean,
    default: true,
  },

  /**
   * Whether the postfach link should be shown.
   *
   * @default true
   */
  hasPostfachLink: {
    type: Boolean,
    default: true,
  },
})

const route = useRoute()
const active = computed(() => route.path.replace(`${props.prefix}/`, '').split('/')[0] || '')
</script>
