<template>
  <nav aria-label="breadcrumb" :class="getModifiersClass('c-breadcrumbs', modifiers)">
    <slot>
      <a :href="link.path" class="c-breadcrumbs__item" v-for="(link, index) in links" :key="index"
        :aria-current="index === links.length - 1 ? 'page' : undefined">
        {{ link.text }}
      </a>
    </slot>
    <slot name="end" />
  </nav>
</template>

<script setup lang="ts">
import type { ModifierItems } from './breadcrumbs.config';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  links?: { text: string, path: string }[];
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();
</script>
