<template>
  <q-avatar
    class="avatar-wrap"
    style="background-color: rgba(0, 0, 0, 0.1)"
    :square="props.square"
    v-bind="attrs"
  >
    <q-img v-if="props.src" :src="props.src" :ratio="props.ratio" no-spinner class="fit" :class="props.square?'':'round-borders'">
      <template #error>
        <q-icon
          :name="props.icon"
          class="fit avatar-icon"
          size="1.5em"
          :color="props.color||'white'"
        ></q-icon>
      </template>
    </q-img>
    <q-icon
      v-else
      :name="props.icon"
      class="fit avatar-icon"
      size="1.5em"
      :color="props.color||'white'"
    ></q-icon>
    <slot></slot>
  </q-avatar>
</template>
<script setup>
import { ref, useAttrs } from "vue";
const props = defineProps({
  "src": String,
  "color": String,
  "icon": {
    type: String,
    default: 'person_4'
  },
  "square": Boolean,
  "ratio":{
    type: String
  }
});
const attrs = useAttrs();
</script>
<style lang="scss" scoped>
.avatar-wrap :deep(.avatar-icon) {
  opacity: 0.75;
}
</style>
