@props(['pose', 'width', 'decorative' => false])

@php
    $path = "images/mascot/{$pose}.png";
    $webpPath = "images/mascot/{$pose}.webp";
    if (! file_exists(public_path($path))) {
        throw new \RuntimeException("Mascot pose \"{$pose}\" has no image file at public/{$path}.");
    }
    $minWidth = (int) round($width / 2);
    $vw = round($width / 768 * 100, 2);
@endphp
<picture
    {{ $attributes->merge([
        'class' => 'block select-none pointer-events-none',
        'style' => "width: clamp({$minWidth}px, {$vw}vw, {$width}px); height: auto;",
    ]) }}
>
    @if (file_exists(public_path($webpPath)))
        <source srcset="{{ asset($webpPath) }}" type="image/webp">
    @endif
    <img
        src="{{ asset($path) }}"
        @if ($decorative)
            alt="" aria-hidden="true"
        @else
            alt="LBH the mascot, {{ str_replace('-', ' ', $pose) }}"
        @endif
        class="block w-full h-auto"
        loading="lazy"
    >
</picture>