@extends('layouts.store')

@section('content')
    @php
        // Alias de "type" (del JSON) -> nombre de componente Blade.
        // "product-grid" es class-based; el resto son anónimos (blocks.*).
        $componentMap = [
            'hero-elegante'        => 'blocks.hero-elegante',
            'feature-bar'          => 'blocks.feature-bar',
            'categorias-elegantes' => 'blocks.categorias-elegantes',
            'rich-text'            => 'blocks.rich-text',
            'banner'               => 'blocks.banner',
            'product-grid'         => 'product-grid',
        ];
    @endphp

    @forelse($layout as $block)
        @php
            $type       = $block['type'] ?? null;
            $attributes = $block['attributes'] ?? [];
            $component  = $componentMap[$type] ?? null;
        @endphp

        @if($component)
            {{--
                Renderizado dinámico:
                - :component        -> el "type" del JSON elige qué componente montar
                - :attributes (Bag) -> inyecta los "attributes" del JSON como props del bloque
                Laravel extrae automáticamente las claves que coincidan con los @props
                (o con los parámetros del constructor en el componente class-based).
            --}}
            <x-dynamic-component
                :component="$component"
                :attributes="new \Illuminate\View\ComponentAttributeBag($attributes)"
            />
        @elseif(config('app.debug'))
            <div class="bg-red-50 text-red-700 p-3 text-sm">Bloque desconocido: {{ $type }}</div>
        @endif
    @empty
        <div class="max-w-3xl mx-auto py-24 px-4 text-center text-gray-500">
            <p>Esta página aún no tiene contenido. Edítala desde el Page Builder del panel.</p>
        </div>
    @endforelse
@endsection
