{{--
    Canvas Container — Blade component for 3D scene containers.

    Props:
      - scene (string, required) : Scene module name (e.g. 'home-product')
      - fallbackImage (string)   : Path to fallback image (shown when WebGL fails)
      - ariaLabel (string)       : Accessible label for the scene
      - class (string)           : Additional CSS classes

    Usage:
      <x-canvas-container
          scene="home-product"
          fallback-image="/images/fallbacks/home-product.webp"
          aria-label="Animation 3D interactive présentant les produits Wasoria"
      />
--}}

@props(['scene', 'fallbackImage' => '', 'ariaLabel' => ''])

<div data-scene="{{ $scene }}" role="img" aria-label="{{ $ariaLabel }}"
    {{ $attributes->merge(['class' => 'canvas-container relative w-full h-full']) }}>
    {{-- Loading spinner — visible while scene JS is loading --}}
    <div class="scene-spinner absolute inset-0 z-10 flex items-center justify-center pointer-events-none"
        aria-hidden="true">
        <svg class="animate-spin h-8 w-8 text-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
            </circle>
            <path class="opacity-75" fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
            </path>
        </svg>
    </div>
    @if ($fallbackImage)
        <img src="{{ $fallbackImage }}" alt="{{ $ariaLabel }}"
            class="canvas-fallback-img absolute inset-0 w-full h-full object-cover" loading="lazy" />
    @endif
    {{ $slot }}
</div>