<template>
  <span class="mm-breadcrumb-item">
    <span
      :class="{
        'mm-breadcrumb-inner': true,
        'mm-breadcrumb--link': to,
      }"
      role="link"
      @click="go">
      <slot></slot>
    </span>
    <i
      v-if="separatorClass"
      :class="separatorClass"
      class="mm-breadcrumb-separator"></i>
    <span
      v-else
      class="mm-breadcrumb-separator"
      role="presentation">
      {{ separator }}
    </span>
  </span>
</template>
<script>
import get from "lodash/get"
export default {
  name: "mm-breadcrumb-item",
  props: {
    to: null,
    replace: Boolean,
  },
  inject: {
    breadcrumb: {
      from: "mm-breadcrumb",
      default: null,
    },
  },
  computed: {
    separator() {
      return get(this.breadcrumb, "separator", "")
    },
    separatorClass() {
      return get(this.breadcrumb, "separatorClass", "")
    },
  },
  methods: {
    go() {
      const { to, $router } = this
      if (!to || !$router) {
        return
      }
      this.replace ? $router.replace(to) : $router.push(to)
    },
  },
}
</script>
