<template>
  <figure
    class="avatar"
    :class="[
      `avatar--${size}`
    ]"
  >
    <image-item
      class="avatar__image"
      :source="source"
      :alt="alternative"
    ></image-item>
  </figure>
</template>

<script>
export default {
  name: 'avatar',
  components: {
    ImageItem: () => import('@/components/images/ImageItem.vue'),
  },
  props: {
    source: {
      type: String,
      required: true,
    },
    alternative: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      required: false,
      default: 's',
      validator: (val) => {
        return ['s', 'm', 'l', 'xl'].indexOf(val) !== -1;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar {
  margin: 0;
  overflow: hidden;
  border-radius: border-radius(quinary);
  &--s {
    width: 40px;
    width: 4rem;
    height: 40px;
    height: 4rem;
  }
  &--m {
    width: 50px;
    width: 5rem;
    height: 50px;
    height: 5rem;
  }
  &--l {
    width: 60px;
    width: 6rem;
    height: 60px;
    height: 6rem;
  }
  &--xl {
    width: 70px;
    width: 7rem;
    height: 70px;
    height: 7rem;
  }
  &__image {
    /deep/
    img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
    }
  }
}
</style>

