<template>
  <img :src="processedSrc" :alt="alt" @error="handleError" v-bind="$attrs" />
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  src: { type: String, default: "" },
  fallback: { type: String, default: "https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/1c00e9b46132.bin" },
  alt: { type: String, default: "" },
});

const processedSrc = computed(() => {
  if (!props.src) return props.fallback;
  if (Array.isArray(props.src)) return props.src[0];
  if (
    props.src.startsWith("http") ||
    props.src.startsWith("/") ||
    props.src.startsWith("data:")
  ) {
    return props.src;
  }
  // Assume it's a hash if it's long and doesn't have common URL markers
  if (
    props.src.length > 20 &&
    !props.src.includes(".") &&
    !props.src.includes("/")
  ) {
    return `/RequestData/File/${props.src}`;
  }
  return props.src;
});

const handleError = (e) => {
  e.target.src = props.fallback;
};
</script>
