{{-- 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])

<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>