<div class="flex flex-col items-center justify-center p-4">
    @if($imageData)
        <img
            src="{{ $imageData }}"
            alt="{{ $filename }}"
            class="max-w-full max-h-[70vh] rounded-lg shadow-lg object-contain"
        />
        <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">{{ $filename }}</p>
    @else
        <div class="flex flex-col items-center justify-center py-12">
            <x-filament::icon
                icon="heroicon-o-photo"
                class="h-16 w-16 text-gray-400"
            />
            <p class="mt-4 text-gray-500 dark:text-gray-400">{{ __('Unable to load image') }}</p>
        </div>
    @endif
</div>
