{{-- One showcase example: the Blade in `code`, rendered, with the source beside it — one string,
     so what is shown and what is written can never disagree. --}}

@props(['title' => null, 'code', 'stack' => false])

@php
    // Written as an application without a prefix writes it; under a configured prefix the tags are
    // rewritten to it, so what renders and what is shown is what this application would write.
    $prefix = config('livewire-material.prefix');

    if (filled($prefix)) {
        $names = collect(glob(\NoNameWeb\LivewireMaterial\LivewireMaterialServiceProvider::componentPath().'/*.blade.php'))
            ->map(fn (string $path): string => preg_quote(basename($path, '.blade.php'), '/'))
            ->sortByDesc(fn (string $name): int => strlen($name))
            ->implode('|');

        $code = preg_replace('/<(\/?)x-('.$names.')(?=[\s\/>])/', '<$1x-'.$prefix.'::$2', $code);
    }
@endphp

<div class="space-y-4 rounded-corner-lg bg-surface-container p-4">
    @if ($title)
        <h3 class="type-title-md">{{ $title }}</h3>
    @endif

    <div @class(['flex flex-wrap items-center gap-4' => ! $stack, 'space-y-4' => $stack])>
        {!! \Illuminate\Support\Facades\Blade::render($code) !!}
    </div>

    <details>
        <summary class="w-fit cursor-pointer rounded-corner-xs type-label-md text-on-surface-variant focus-ring">Blade</summary>
        <pre class="mt-2 overflow-x-auto rounded-corner-sm bg-surface-container-highest p-3 type-body-sm"><code>{{ trim($code) }}</code></pre>
    </details>
</div>