<template>
  <div class="profile-widget">
    <div class="profile-widget__avatar">
      <avatar
        :avatar-url="me.avatarUrl"
        :editable="true"/>
    </div>
    <h3 class="profile-widget__name">{{ me.firstName }} {{ me.lastName }}</h3>
  </div>
</template>

<script>
  import Avatar from '@/components/profile/Avatar';
  import {meQuery} from '@/graphql/queries';

  export default {
    components: {
      Avatar
    },

    apollo: {
      me: meQuery
    },

    data: () => ({
      me: {}
    })
  };
</script>

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

  .profile-widget {
    display: flex;
    flex-direction: column;
    align-items: start;

    &__name {
      @include heading-4;
      text-align: center;
      margin-bottom: $small-spacing;
    }

    &__avatar {
      display: flex;
      justify-content: center;
      margin-bottom: $medium-spacing;
      width: 120px;
      height: 120px;
      position: relative;

    }
  }
</style>
