<template>
  <!-- eslint-disable vue/valid-template-root -->
  <router-link :to="{path: href}" v-if="canRead">{{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 { permissionStore } from '../tools/permission-store.js'

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'
    }
  },
  computed: {
    canRead() {
      return !this.itemName || permissionStore.canRead(this.itemName);
    }
  }
}
</script>
