<template>
  <img
    v-if="src"
    :src="src"
    :style="imgStyle"
    :id="id"
    class="icon-user"
    @click="$emit('click', $event)"
  />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  src:    { type: String, required: true },
  width:  { type: [String, Number], default: 30 },
  height: { type: [String, Number], default: 30 },
  id:     { type: String, default: '' },
})

defineEmits(['click'])

const normalize = (val) => {
  if (typeof val === 'number') return `${val}px`
  if (typeof val === 'string' && /^\d+$/.test(val)) return `${val}px`
  return val
}

const imgStyle = computed(() => ({
  width:  normalize(props.width),
  height: normalize(props.height),
}))
</script>
