<template>
  <div class="search-image-bubble">
    <div v-if="!imageUrl" class="p-4 text-n-slate-11 text-sm">
      No image URL
    </div>
    <div v-else class="inline-block">
      <img
        :src="imageUrl"
        alt="Search Image"
        class="max-w-md rounded-lg shadow-sm"
        @error="handleImageError"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useMessageContext } from '../provider.js';

const { contentAttributes, content } = useMessageContext();

const imageUrl = computed(() => {
  return contentAttributes.value?.url || content.value || '';
});

const handleImageError = (event) => {
  console.error('[SearchImageBubble] Image failed to load:', imageUrl.value);
};
</script>

<style scoped>
.search-image-bubble img {
  max-height: 400px;
  width: auto;
}
</style>
