<template>
  <div class="owner-widget">
    <avatar
      :avatar-url="owner.avatarUrl"
      class="owner-widget__avatar" />
    <span data-cy="owner-name">
      {{ name }}
    </span>
  </div>
</template>

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

  export default {
    props: ['owner'],

    components: {
      Avatar
    },

    computed: {
      name() {
        return `${this.owner.firstName} ${this.owner.lastName}`;
      }
    }
  };
</script>

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

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

    &__avatar {
      width: 30px;
      height: 30px;
    }

    & > span {
      opacity: 0.6;
      margin-left: $small-spacing;
      @include room-widget-text-style;;
    }
  }
</style>
