<script>

export default {
  name: 'BreadCrumbs',
  components: {},
  props: {
    breadcrumbs: {
      type: Array,
      default: null
    },
  },
  computed: {
  },
  methods: {
    rkey() {
      return Math.random().toString(36).slice(4)
    }
  }
}

</script>

<template>
  <!-- BEGIN: Breadcrumb -->
  <nav
    v-if="breadcrumbs"
    aria-label="breadcrumb"
    class="-intro-x h-[45px] mr-auto"
  >
    <ol class="breadcrumb breadcrumb-light">
      <li
        v-for="{name, link, active} in breadcrumbs"
        :key="rkey(name)"
        :class="{'breadcrumb-item active': active, 'breadcrumb-item': !active}"
        aria-current="page"
      >
        <a
          :href="link"
        >{{ name }}</a>
      </li>
    </ol>
  </nav>
  <!-- END: Breadcrumb -->
  <div class="flex grow w-full border-hide-600" />
</template>
