<template>
  <ul class="snapshot-team-menu">
    <li class="snapshot-team-menu__item">
      <a
        :class="{'snapshot-team-menu__link--active': selected === 'mine'}"
        class="snapshot-team-menu__link"
        @click="$emit('select', 'mine')">Meine Snapshots</a></li>
    <li
      class="snapshot-team-menu__item"
    >
      <a
        :class="{'snapshot-team-menu__link--active': selected === 'team'}"
        class="snapshot-team-menu__link"
        @click="$emit('select', 'team')">Team Snapshots</a></li>
  </ul>
</template>

<script>
  export default {
    props: {
      selected: {
        type: String,
        default: 'mine',
      },
    },
  };
</script>

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

  .snapshot-team-menu {
    display: flex;

    &__item {
      margin-right: $large-spacing;
      padding: $medium-spacing 0;
    }

    &__link {
      @include default-link;
      color: $color-silver-dark;
      cursor: pointer;

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