<template>
  <div
    v-if="user.photo_path"
    class="rounded-full bg-cover bg-center"
    :style="setBackground()"
  ></div>
  <div
    v-else
    :style="`background-color:${user.color};`"
    class="rounded-full font-bold flex items-center justify-center text-white"
  >
    {{ user.user_char }}
  </div>
</template>

<script>
export default {
  props: {
    user: Object,
    size: {
      type: String,
      default: 'small',
    },
  },
  methods: {
    setBackground() {
      return `background-image: url(/img/${this.user.photo_path}?p=${this.size});`;
    },
  },
};
</script>
