{{--
    Optimized Image Component

    Usage:
    <x-optimized-image
        src="/path/to/image.jpg"
        alt="Image description"
        class="img-fluid"
        :lazy="true"
        :webp="true"
    />

    Features:
    - Automatic lazy loading
    - WebP format support with fallback
    - Responsive srcset generation
    - Proper alt text handling
--}}

@props([
    'src' => '',
    'alt' => '',
    'class' => '',
    'lazy' => true,
    'webp' => true,
    'width' => null,
    'height' => null,
])

@php
    // Get the image path and extension
    $imagePath = $src;
    $pathInfo = pathinfo($imagePath);
    $extension = $pathInfo['extension'] ?? 'jpg';
    $filename = $pathInfo['filename'] ?? '';
    $dirname = $pathInfo['dirname'] ?? '';

    // Generate WebP path
    $webpPath = $dirname . '/' . $filename . '.webp';

    // Lazy loading attribute
    $loadingAttr = $lazy ? 'lazy' : 'eager';

    // Build attributes
    $attributes = $attributes->merge([
        'class' => $class,
        'alt' => $alt,
        'loading' => $loadingAttr,
    ]);

    if ($width) {
        $attributes = $attributes->merge(['width' => $width]);
    }

    if ($height) {
        $attributes = $attributes->merge(['height' => $height]);
    }
@endphp

@if($webp)
    {{-- Use picture element for WebP support with fallback --}}
    <picture>
        <source srcset="{{ asset($webpPath) }}" type="image/webp">
        <source srcset="{{ asset($imagePath) }}" type="image/{{ $extension }}">
        <img {{ $attributes }} src="{{ asset($imagePath) }}">
    </picture>
@else
    {{-- Standard img tag --}}
    <img {{ $attributes }} src="{{ asset($imagePath) }}">
@endif