<template>
  <div class="user-widget">
    <div class="user-widget__avatar">
      <avatar :avatar-url="avatarUrl" />
    </div>
    <span class="user-widget__name">{{ firstName }} {{ lastName }}</span>
    <span
      class="user-widget__date"
      v-if="date">{{ date }}</span>
  </div>
</template>

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

  export default {
    props: ['firstName', 'lastName', 'avatarUrl', 'date'],

    components: {
      Avatar
    }
  };
</script>

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

  .user-widget {
    color: $color-silver-dark;
    display: flex;
    align-items: center;

    &__name {
      padding: 0px 10px;
      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;
    }

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