<script setup>
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
  onClick: {
    type: Function,
    default: () => {},
  },
  size: {
    type: Number,
    default: 45,
  },
  borderColor: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <view class="avatar" @click="onClick">
    <image
      :src="src || '../static/user-icon.png'"
      mode="widthFix"
      :style="{
        width: size + 'px',
        height: size + 'px',
        minHeight: size + 'px',
        borderColor: borderColor || '#fff',
      }"
      class="avatar-image"
    />
  </view>
</template>

<style scoped>
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-image {
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>
