<template>
  <div
    class="mm-breadcrumb"
    aria-label="Breadcrumb"
    role="navigation">
    <slot></slot>
  </div>
</template>

<script>
import config from "../../managers/config"

config.defaults({
  "Breadcrumb.separator": ">",
  "Breadcrumb.separatorClass": "",
})

export default {
  name: "mm-breadcrumb",
  props: {
    separator: {
      type: String,
      default: () => config.get("Breadcrumb.separator"),
    },
    separatorClass: {
      type: String,
      default: () => config.get("Breadcrumb.separatorClass"),
    },
  },
  provide() {
    return {
      "mm-breadcrumb": this,
    }
  },

  mounted() {
    const items = this.$el.querySelectorAll(".mm-breadcrumb-item")
    if (items.length) {
      items[items.length - 1].setAttribute("aria-current", "page")
    }
  },
}
</script>
