<script setup lang="ts">
import { computed, useRuntimeConfig } from '#imports'

const props = defineProps({
  src: {
    type: String,
    default: '',
  },
  alt: {
    type: String,
    default: '',
  },
  width: {
    type: [String, Number],
    default: undefined,
  },
  height: {
    type: [String, Number],
    default: undefined,
  },
})

function withBase(input: string, base: string): string {
  if (!base || base === '/') return input
  const normalizedBase = base.endsWith('/') ? base.slice(0, -1) : base
  const normalizedInput = input.startsWith('/') ? input : `/${input}`
  return normalizedBase + normalizedInput
}

const refinedSrc = computed(() => {
  if (props.src?.startsWith('/') && !props.src.startsWith('//'))
    return withBase(props.src, useRuntimeConfig().app.baseURL)

  return props.src
})
</script>

<template>
  <img :src="refinedSrc" :alt="alt" :width="width" :height="height" />
</template>
