<template>
  <div :class="[classNames.avatar, isOnline ? classNames.onlineStatus : classNames.offlineStatus]">
    <img :src="avatarPath"
    />
  </div>
</template>

<script>

export default {
  name: 'Avatar',
  props: {
    classNames: {
      type: Object,
      default () {
        return {
          avatar: 'Hello'
        }
      }
    },
    isOnline: {
      type: Boolean,
      default: true
    },
    avatarPath: {
      type: String,
      default: require('./../assets/member-icon-01.png')
    }
  },
  mounted () {
    // console.log(this.classNames.avatar)
  }
}
</script>

<style lang="sass" scoped>
  @import "./../styles/global"
  .avatar
    display: grid
    overflow: hidden
    border-radius: 5px
    img
      width: 100%
  .online
    border: 2px solid $success
    box-shadow: 0 0 3px $success
  .offline
    border: 2px solid $triage-status
    box-shadow: 0 0 3px $triage-status
  .neutral
    border: none
    box-shadow: none
</style>
