<template>
  <router-link
    :to="to"
    class="sub-navigation-item back-link">
    <chevron-left class="back-link__icon sub-navigation-item__icon"/>
    {{ fullTitle }}
  </router-link>
</template>

<script>
  import ChevronLeft from '@/components/icons/ChevronLeft';
  import {MODULE_PAGE} from '@/router/module.names';

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: 'topic',
      },
      slug: {
        type: String,
        default: '',
      },
    },

    components: {
      ChevronLeft,
    },

    computed: {
      to() {
        if (this.type === 'topic') {
          return {name: 'topic', params: {topicSlug: this.slug}};
        } else {
          return {name: MODULE_PAGE};
        }
      },
      fullTitle() {
        return this.type === 'topic' ? `Thema: ${this.title}` : `Modul: ${this.title}`;
      }
    },
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .back-link {
    @include regular-text;
  }
</style>
