<template>
  <ul
    class="nv-breadcrumbs flex flex-wrap list-none m-0 p-0"
    :class="[...sizeableClasses]"
  >
    <li v-for="(item, idx) in items" :key="idx" class="flex p-0 items-center">
      <NvBreadcrumbsItem :item="item" />
      <span
        v-if="idx < items.length - 1"
        class="px-[0.5rem] flex items-center text-black opacity-40"
      >
        <slot v-if="$slots.divider" name="divider" />
        <template v-else>
          <div v-if="divider">{{ divider }}</div>
          <NvIcon v-else icon="nvi-chevron-right-thin" />
        </template>
      </span>
    </li>
  </ul>
</template>

<script>
import useSize from "../../composables/sizeable";
import NvBreadcrumbsItem from "./Item.vue";

export default {
  components: { NvBreadcrumbsItem },
  props: {
    items: { type: Array, default: () => [] },
    divider: { type: String, default: "" },
    size: { type: String, default: "md" },
  },
  setup(props) {
    const { sizeableClasses } = useSize(props);

    return { sizeableClasses };
  },
};
</script>
