@props([
    'src' => null,
    'alt' => '',
    'ratio' => '16/10',      // 16/10 | 16/9 | 21/9 | 4/3 | 3/4 | 1/1 | none
    'thumb' => true,         // prefer the generated thumbnail
    'eager' => false,        // true for the LCP image only
    'zoom' => false,         // scale slightly when an ancestor .group is hovered
    'rounded' => 'rounded-2xl',
    'fallback' => 'images/placeholder.svg',
])

@php
    $url = $thumb ? thumb_url($src, $fallback) : image_url($src, $fallback);

    $aspect = match ($ratio) {
        'none' => '',
        '16/9' => 'aspect-16/9',
        '21/9' => 'aspect-21/9',
        '4/3' => 'aspect-4/3',
        '3/4' => 'aspect-3/4',
        '1/1' => 'aspect-square',
        default => 'aspect-16/10',
    };
@endphp

<div {{ $attributes->merge(['class' => trim("relative overflow-hidden bg-surface-muted $aspect $rounded")]) }}>
    <img src="{{ $url }}" alt="{{ $alt }}"
         @class(['size-full object-cover', 'media-zoom' => $zoom])
         @if ($eager)
             fetchpriority="high" decoding="async"
         @else
             loading="lazy" decoding="async"
         @endif>

    {{ $slot }}
</div>