@props([
    'src' => null,
    'alt' => '',
    'eager' => false,
    'imgClass' => '',
])

{{--
    Lazy-loaded image with a skeleton shimmer placeholder.

    The skeleton is a top layer that fades out once the image loads, so it never
    clashes with images that carry a design opacity (e.g. banners at opacity-25).
    Pass sizing/positioning/rounding classes on the component tag (they merge onto
    the wrapper); pass object-fit and image-only classes via `imgClass`. Use
    `eager` for above-the-fold / LCP images to skip lazy loading.

    The wrapper must establish a positioning context for the skeleton overlay, so
    always give it a position utility: `relative` for in-flow images, or
    `absolute inset-0` when filling a positioned parent.
--}}
<div {{ $attributes->class('overflow-hidden') }} x-data="{ loaded: false }">
    @if ($src)
        <img src="{{ $src }}" alt="{{ $alt }}"
            loading="{{ $eager ? 'eager' : 'lazy' }}" decoding="async"
            @if ($eager) fetchpriority="high" @endif
            x-init="if ($el.complete) loaded = true"
            x-on:load="loaded = true" x-on:error="loaded = true"
            class="{{ $imgClass }}">
    @endif

    <div class="absolute inset-0 bg-surface-container-highest animate-pulse pointer-events-none"
        x-show="!loaded" x-transition:leave="transition-opacity duration-700"
        x-transition:leave-end="opacity-0"></div>
</div>