@php
    $showDownloads = $showDownloads ?? true;
@endphp

<div class="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
    <div class="relative flex items-center justify-center bg-gradient-to-br from-indigo-50/60 via-white to-violet-50/40 px-8 py-10">
        <div class="w-full max-w-xs">
            <div class="overflow-hidden rounded-2xl bg-white p-4 shadow-2xl ring-1 ring-black/5">
                <img src="{{ $previewDataUri }}"
                     alt="Payment QR code for {{ $qrCode->label }}"
                     class="aspect-square w-full object-contain">
            </div>
        </div>
    </div>

    @if ($showDownloads)
        <div class="border-t border-slate-100 bg-slate-50/50 px-6 py-5">
            <p class="mb-3 text-[10px] font-semibold uppercase tracking-[0.1em] text-slate-400">Download</p>
            <div class="grid grid-cols-3 gap-2">
                <a href="{{ route('merchant.storefronts.download', [$qrCode, 'png']) }}"
                   class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-indigo-300 hover:bg-indigo-50">
                    <span class="text-xs font-semibold text-slate-600 transition group-hover:text-indigo-700">PNG</span>
                </a>
                <a href="{{ route('merchant.storefronts.download', [$qrCode, 'svg']) }}"
                   class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-violet-300 hover:bg-violet-50">
                    <span class="text-xs font-semibold text-slate-600 transition group-hover:text-violet-700">SVG</span>
                </a>
                <a href="{{ route('merchant.storefronts.download', [$qrCode, 'pdf']) }}"
                   class="group flex flex-col items-center gap-1.5 rounded-xl border border-slate-200 bg-white py-3.5 text-center transition hover:border-rose-300 hover:bg-rose-50">
                    <span class="text-xs font-semibold text-slate-600 transition group-hover:text-rose-700">PDF</span>
                </a>
            </div>
        </div>
    @endif
</div>