<template>
  <div :class="classNames.messageViewers">
    <div :class="classNames.readByBox">
      <p class="text">Read by</p>
      <div :class="classNames.viewersList">
        <avatar v-for="item in viewers"
                :key="item.id"
                :class="classNames.viewersImage"
                :classNames="classNames"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from './Avatar'

export default {
  components: { Avatar },
  name: 'MessageViewers',
  data () {
    return {
    }
  },
  props: ['classNames', 'viewers']
}
</script>

<style lang="sass" >
  @import "../styles/global"
  .message-viewers
    display: grid
    position: absolute
    color: $dark-text-color
    right: -45px
    top: 18px
    .text
      padding-bottom: 5px
      border-bottom: 1px solid #C9C9C9
      font-size: 12px
    div.read-by-box
      display: grid
      grid-template-rows: auto auto
      padding: 10px
      background-color: $tertiary-color
      box-shadow: $box-shadow-color
      border-radius: 5px
      position: relative
      &::before
        content: ''
        width: 0
        height: 0
        position: absolute
        right: 40px
        top: 2px
        border: 7px solid
        border-color: $tertiary-color $tertiary-color transparent transparent
        transform-origin: 0 0
        transform: rotate(-45deg)
        box-shadow: 3px -3px 3px rgba(#000, 0.2)
      .viewers-list
        display: grid
        grid-template-columns: repeat(4, auto)
        grid-column-gap: 10px
        grid-row-gap: 5px
        padding: 10px 10px 0 10px
        justify-content: start
        .viewers-image
          width: 35px
          border: none

</style>
