<template>
  <div>
    <div
      v-for="(page, index) in parentPages"
      :key="index"
      class="parentPage"
    >
      <span
        @click="onClick(page)"
        class="parentName"
      >
        {{ page.name }}
      </span>
      <span class="separator">{{ separator }}</span>
    </div>
    <span class="currentName">{{ currentPage.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    parentPages: {
      type: Array,
      default: function() {
        return [{ name: '' }]
      },
    },
    currentPage: {
      type: Object,
      default: function() {
        return { name: '' }
      },
      required: true,
    },
    separator: {
      type: String,
      default: '/',
    },
    onClick: {
      type: Function,
      default: function() {},
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../mixin/mixin.scss';
@import '../const/variable.scss';

.parentPage {
  display: inline-block;

  .parentName {
    color: palette(gray, dark);

    &:hover {
      cursor: pointer;
      color: palette(blue, light);
    }
  }

  .separator {
    margin: 0 5px;
  }
}
</style>
