@props([
    'image' => [],
    'fetchpriority' => 'auto',
    'loading' => 'lazy',
    'decoding' => 'async',
])

@php
    $sources = is_array($image['sources'] ?? null) ? $image['sources'] : [];
    $src = $image['img_src'] ?? 'https://files.skinbase.org/default/missing_xl.webp';
    $srcset = $image['img_srcset'] ?? null;
    $sizes = $image['img_sizes'] ?? '100vw';
    $alt = $image['alt'] ?? 'Featured artwork';
@endphp

<picture>
    @foreach ($sources as $source)
        <source
            media="{{ $source['media'] ?? '' }}"
            srcset="{{ $source['srcset'] ?? '' }}"
            sizes="{{ $source['sizes'] ?? '100vw' }}"
            type="image/webp"
        >
    @endforeach
    <img
        src="{{ $src }}"
        @if($srcset) srcset="{{ $srcset }}" sizes="{{ $sizes }}" @endif
        alt="{{ $alt }}"
        {{ $attributes }}
        fetchpriority="{{ $fetchpriority }}"
        loading="{{ $loading }}"
        decoding="{{ $decoding }}"
    >
</picture>