<template>
  <div
    :class="{'user-widget--is-profile': isProfile}"
    class="user-widget">
    <div
      class="user-widget__avatar"
      data-cy="user-widget-avatar">
      <avatar
        :avatar-url="avatarUrl"
        :icon-highlighted="isProfile"
      />
    </div>
  </div>
</template>

<script>
  import Avatar from '@/components/profile/Avatar';

  export default {
    props: {
      avatarUrl: {
        type: String
      }
    },

    components: {
      Avatar
    },
    computed: {
      isProfile() {
        return this.$route.meta.isProfile;
      }
    }
  };
</script>

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

  .user-widget {
    color: $color-silver-dark;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
    margin-right: $medium-spacing;

    &__popover {
      top: 40px;
      white-space: nowrap;
    }

    &__name {
      padding: 0px $small-spacing;
      color: $color-silver-dark;
      font-family: $sans-serif-font-family;
    }

    &__date {
      font-family: $sans-serif-font-family;
    }

    &__avatar {
      width: 30px;
      height: 30px;
      fill: $color-silver-dark;
      cursor: pointer;
    }

    &--is-profile {
      & > span {
        color: $color-brand;
      }
    }
  }
</style>
