@props(['icon' => 'image', 'seed' => 0, 'photos' => null, 'ratio' => null, 'fav' => null, 'badges' => [], 'url' => null, 'alt' => ''])
@php
    $tint = $seed % 4 === 0 ? ' media-orange' : '';
    $ratioClass = $ratio ? ' media-'.$ratio : '';
@endphp
<div {{ $attributes->merge(['class' => 'media'.$tint.$ratioClass]) }}>
    @if($url)
        <img src="{{ $url }}" alt="{{ $alt }}" class="media-img" loading="lazy">
    @else
        <x-icon :name="$icon"/>
    @endif

    @if($badges)
        <div class="media-badges">
            @foreach($badges as $b)
                <span class="badge {{ $b['class'] ?? 'badge-dark' }}">
                    @isset($b['icon'])<x-icon :name="$b['icon']"/>@endisset {{ $b['label'] }}
                </span>
            @endforeach
        </div>
    @endif

    @if($fav)
        <button class="media-fav" data-fav="{{ $fav }}" aria-label="Ajouter aux favoris" title="Ajouter aux favoris">
            <x-icon name="heart"/>
        </button>
    @endif

    @if($photos)
        <span class="media-count"><x-icon name="camera"/> {{ $photos }}</span>
    @endif

    {{ $slot }}
</div>