<template>
  <div class="text-sm breadcrumbs" data-aos="fade-up">
    <ul>
      <li><router-link v-bind:to="`/`"><a href="/">Home</a></router-link></li>
      <li v-if="rootPage"><router-link v-bind:to="`/${rootPage.link}`"><a :href="'/'+rootPage.link">{{ rootPage.name }}</a></router-link></li>
      <li v-if="subRootPage"><router-link v-bind:to="`/${subRootPage.link}`"><a :href="'/'+subRootPage.link">{{ subRootPage.name }}</a></router-link></li>
      <li>{{ currentPage }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "LandingBreadcrumbs",
  props: {
    rootPage: {
      type: Object,
      link: {
        type: String,
        default: '/',
      },
      name: {
        type: String,
      },
    },
    subRootPage: {
      type: Object,
      link: {
        type: String,
        default: '/',
      },
      name: {
        type: String,
      },
    },
    currentPage: {
      type: String,
      required: "",
    },
  },
  computed: {
    ...mapState(["isRTL"]),
  },
};
</script>
