@props(['src', 'alt' => 'Hand Image'])

@if($src)
    <div class="image-preview-container position-relative d-inline-block">
        <a href="{{ asset($src) }}" target="_blank" title="Click to view full image">
            <img src="{{ asset($src) }}" 
                 alt="{{ $alt }}" 
                 class="img-thumbnail" 
                 style="max-width: 150px; max-height: 150px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        </a>
    </div>
@else
    <div class="text-muted d-flex align-items-center justify-content-center bg-light border rounded" 
         style="width: 150px; height: 150px; border-style: dashed !important; border-width: 2px !important;">
        <div class="text-center">
            <i class="feather icon-image d-block mb-1" style="font-size: 24px; opacity: 0.6;"></i>
            <small>Not Uploaded</small>
        </div>
    </div>
@endif