<template>
  <nav
    class="ui-breadcrumbs"
    aria-label="Breadcrumb"
    itemscope
    itemtype="https://schema.org/BreadcrumbList"
  >
    <ol>
      <li
        v-for="(item, index) in resultItems"
        :key="`breadcrumb-${index}`"
        itemscope
        itemprop="itemListElement"
        itemtype="https://schema.org/ListItem"
      >
        <NuxtLink
          :to="generateLink(item.to || '/')"
          class="ui-breadcrumbs__item"
          itemprop="item"
        >
          <span
            itemprop="name"
            v-html="item.name"
          />
        </NuxtLink>
        <meta
          :content="String(index + 1)"
          itemprop="position"
        >
      </li>
      <li
        itemscope
        itemprop="itemListElement"
        itemtype="https://schema.org/ListItem"
      >
        <span
          class="ui-breadcrumbs__item"
          aria-current="page"
          itemprop="name"
          v-html="items[items.length - 1].name"
        />
        <meta
          :content="String(items.length)"
          itemprop="position"
        >
      </li>
    </ol>
  </nav>
</template>

<script setup lang="ts">
import type { IBreadcrumbItem } from '../../types';

const props = defineProps<{
  items: IBreadcrumbItem[]
}>();

const { generateLink } = useGenerateLink();

const resultItems = computed(() => {
  return props.items.slice(0, props.items.length - 1);
});
</script>

<style lang="scss">
.ui-breadcrumbs ol {
  display: flex;
  column-gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ui-breadcrumbs__item {
  text-transform: capitalize;
  color: $breadcrumbs-text;
}

.ui-breadcrumbs li {
  @include font-sm;

  display: flex;
  column-gap: 8px;
  color: $breadcrumbs-text;
}

.ui-breadcrumbs ol li:last-child .ui-breadcrumbs__item {
  color: $breadcrumbs-text--current;
  text-transform: capitalize;
}

.ui-breadcrumbs ol li:not(:last-child) {
  position: relative;

  &::after {
    content: '>';
  }
}

.ui-breadcrumbs ol li:not(:last-child) .ui-breadcrumbs__item {
  @include hover(color) {
    color: $breadcrumbs-text--hover;
  }
}
</style>
