<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="select-none rounded-full font-bold flex items-center justify-center text-white"
  >
    {{ user.user_char }}
  </div>
</template>

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