<template>
  <div
    class="_user-thumbnail-container"
    :style="{
      width: width,
      height:height
    }"
  >
    <img v-if="data" width="100%" height="100%" :src="data"/>
    <LoadingIcon v-else width="100%" :fill="GLOBALS.__THEME_PRIMARY_COLOR__"/>
  </div>
</template>

<script>
/**
 * UserThumbnail component
 */
export default {
  name: 'UserThumbnail',
  props: {
    // User thumbnail data (base64)
    data: {
      type: String
    },
    // Width
    width: {
      type: Number,
      default: 250
    },
    // Height
    height: {
      type: Number,
      default: function () {
        return this.width
      }
    }
  }
}
</script>

<style lang="scss">
._user-thumbnail-container {
  @apply border-2 border-@dark-primary;
  @apply overflow-hidden;
  @apply rounded-full;
}
</style>
