<template>
  <div class="logout-widget">
    <a
      class="logout-widget__logout"
      data-cy="logout"
      @click="logout()"
    >Abmelden</a>
  </div>
</template>

<script>
  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';

  export default {
    methods: {
      logout() {
        this.$apollo.mutate({
          mutation: LOGOUT_MUTATION,
        }).then(({data}) => {
          if (data.logout.success) { location.replace('/logout'); }
        });
      }
    }
  };
</script>

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

  .logout-widget {
    display: flex;
    align-items: center;

    &__logout {
      @include default-link;
      cursor: pointer;
    }
  }
</style>
