<template>
  <nav class="breadcrumbs">
    <template v-for="(link, index) in linkStack" :key="index">
      <RouterLink
        :to="link.href"
        class="breadcrumb goto-link"
        :class="{ trim: link.allowTrimming ? link.allowTrimming : false }"
      >
        {{ link.label }}
      </RouterLink>
      <ChevronRightIcon />
    </template>
    <span class="breadcrumb">{{ currentTitle }}</span>
  </nav>
</template>

<script setup>
import { ChevronRightIcon } from '@/components'
defineProps({
  linkStack: {
    type: Array,
    default: () => [],
  },
  currentTitle: {
    type: String,
    required: true,
  },
})
</script>

<style lang="scss" scoped>
.breadcrumbs {
  display: flex;
  margin-bottom: var(--gap-lg);
  align-items: center;
  flex-wrap: wrap;

  svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  a.breadcrumb {
    padding-block: var(--gap-xs);
    &.trim {
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
