@props([
    'product' => null,
    'image' => null,
    'context' => 'listing', // 'listing' | 'detail' - listing uses small/medium, detail uses large
    'alt' => '',
    'class' => '',
])

@php
    $img = $image ?? ($product?->image ?? null);
    $altText = $alt ?: ($product?->name ?? 'Product image');
    $hasMultipleSizes = $img && is_array($img) && isset($img['small']) && isset($img['large']) && ($img['small'] ?? '') !== ($img['large'] ?? '');
@endphp

@if($img && is_array($img))
    @if($hasMultipleSizes)
        <picture>
            <source media="(max-width: 480px)" srcset="{{ $img['small'] ?? $img['original'] }}">
            <source media="(max-width: 768px)" srcset="{{ $img['medium'] ?? $img['small'] ?? $img['original'] }}">
            <img src="{{ $img['large'] ?? $img['original'] }}"
                 alt="{{ $altText }}"
                 loading="lazy"
                 decoding="async"
                 class="{{ $class }}"
                 {{ $attributes }}>
        </picture>
    @else
        <img src="{{ $img['original'] ?? $img['large'] ?? $img['small'] ?? $img['thumb'] ?? '' }}"
             alt="{{ $altText }}"
             loading="lazy"
             decoding="async"
             class="{{ $class }}"
             {{ $attributes }}>
    @endif
@elseif($product && $product->image_path)
    <img src="{{ asset('storage/' . $product->image_path) }}"
         alt="{{ $altText }}"
         loading="lazy"
         decoding="async"
         class="{{ $class }}"
         {{ $attributes }}>
@else
    {{ $slot ?? '' }}
@endif