<template>
  <q-avatar class="bg-grey-5 centered-icon" :size="size">
    <q-img loading="eager" alt="My avatar" :src="imgSrc || 'null'" :style="{ height: size }" ratio="1/1">
      <template #error>
        <q-icon class="text-white q-ma-sm" :size="iconSize" name="fal fa-user" />
      </template>
    </q-img>
  </q-avatar>
</template>

<script>
export default {
  name: "WProfileAvatar",
  props: {
    size: {
      type: String,
      default: "48px",
    },
    imgSrc: {
      type: String,
      default: null,
    },
    iconSize: {
      type: String,
      default: "md",
    }
  },
};
</script>
<style lang="scss">
  .centered-icon {
    .q-img__content {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>

