<template>
  <!-- eslint-disable vue/valid-template-root -->
  <router-link :to="{ path: href }" v-if="canRead(itemName)">{{ label }}</router-link>
  <span class="disabled" v-else>{{ label }}</span>
  <!-- eslint-enable -->
</template>

<style lang="scss" scoped>
.disabled {
  display: inline-block;
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

<script>
import { mapGetters } from 'vuex';

export default {
  props: {
    label: {
      type: String,
      required: true,
      docs: `Label voor het menu item`,
      demoValue: 'Pages'
    },
    href: {
      type: String,
      required: true,
      docs: `Link voor het menu item`,
      demoValue: '/pages'
    },
    itemName: {
      type: String,
      docs: `Naam van het soort object dat gelezen wordt, tbv check voor toegang`,
      demoValue: 'CmsPage',
      required: true
    }
  },
  computed: {
    ...mapGetters('permissions', ['canRead'])
  }
};
</script>
