<template>
  <div class="activity-filter">
    <a
      :class="{'activity-filter__link--active': filter === entry.tag}"
      :key="i"
      class="activity-filter__link"
      v-for="(entry, i) in filters"
      @click="$emit('change-filter', entry.tag)"
    >{{ entry.label }}</a>
  </div>
</template>

<script>
  export default {
    props: ['filter'],

    data() {
      return {
        filters: [
          {tag: '', label: 'Alle'},
          {tag: 'assignments', label: 'Ergebnisse'},
          {tag: 'surveys', label: 'Übungen'},
          {tag: 'bookmarks', label: 'Lesezeichen'},
          {tag: 'notes', label: 'Notizen'},
        ]
      };
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .activity-filter {
    display: flex;
    justify-content: space-between;

    &__link {
      @include small-text;
      cursor: pointer;
      padding: $large-spacing 0;
      color: $color-silver-dark;

      &--active {
        color: $color-brand;
      }
    }
  }
</style>
