<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.vue';
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: flex-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>
