<template>
  <div :class="cssClass">
    <div>
      <base-avatar
        :size="size"
        :image="image" />
    </div>
    <span style="padding-left: 20px;padding-right: 20px;">
      <p class="has-text-black is-family-sans-serif">{{ name }}</p>
      <p class="has-text-grey is-family-sans-serif">@{{ alias }}</p>
    </span>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

import BaseAvatar from './BaseAvatar.vue'

@Component({
  name: 'base-avatar-block',
  components: {
    BaseAvatar
  }
})
export default class BaseAvatarBlock extends Vue {
  @Prop() readonly name!: string
  @Prop() readonly alias!: string
  @Prop() readonly image!: string
  @Prop({ default: false }) readonly active!: boolean
  @Prop({ default: 'normal' }) readonly size!: string

  get cssClass () {
    return {
      'avatar-block': true,
      'is-active': this.active !== false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";

.avatar-block {
  display: flex;
  padding: 10px;
  align-items: center;
}

.is-active {
  background-color: $revas-primary-light;
  border-radius: 5px;
}
</style>
