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

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

  data() {
    return {
      filters: [
        // { tag: '', label: 'Alle' },
        { tag: 'highlights', label: 'Markierungen' },
        { tag: 'bookmarks', label: 'Lesezeichen' },
        { tag: 'assignments', label: 'Ergebnisse' },
        { tag: 'surveys', label: 'Übungen' },
      ],
    };
  },
};
</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>
