@props([
    'src' => null, // Đường dẫn file trong storage/public
    'alt' => '', // Mô tả ảnh
    'width' => 1200, // Chiều rộng mặc định
    'height' => null, // Chiều cao (có thể null)
    'fit' => 'cover', // contain | cover | fill
    'format' => 'webp', // webp | jpg | png
    'quality' => 80, // Chất lượng ảnh
])

@php
    if ($src) {
        $baseUrl = route('image.glide.show', ['path' => $src]);
        $makeUrl = function ($w, $h = null) use ($baseUrl, $fit, $format, $quality) {
            $params = array_filter([
                'w' => $w,
                'h' => $h,
                'fit' => $fit,
                'fm' => $format,
                'q' => $quality,
            ]);
            return $baseUrl . '?' . http_build_query($params);
        };
    }
@endphp

@if ($src)
    <picture>
        {{-- Mobile --}}
        <source srcset="{{ $makeUrl(480, $height ? intval($height / 2) : null) }}" media="(max-width: 480px)">
        {{-- Tablet --}}
        <source srcset="{{ $makeUrl(768, $height ? intval($height / 1.5) : null) }}" media="(max-width: 768px)">
        {{-- Desktop --}}
        <source srcset="{{ $makeUrl(1024, $height) }}" media="(max-width: 1024px)">

        <img src="{{ $makeUrl($width, $height) }}" alt="{{ $alt }}" loading="lazy" class="responsive-img"
            width="{{ $width }}" @if ($height) height="{{ $height }}" @endif
            onerror="this.onerror=null;this.src='/images/no-image.webp';">
    </picture>
@endif