@props([
    'titulo'   => 'Detalhamento do Pagamento',
    'icon'     => 'currency-dollar',
    'carrinho' => [],
])

@if (!empty($carrinho['itens'] ?? []))
    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
        {{-- Header --}}
        <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 px-5 py-3">
            <div class="flex items-center gap-2">
                <x-icon name="{{ $icon }}" class="w-5 h-5 text-white/80" />
                <h3 class="text-sm font-semibold text-white uppercase tracking-wide">{{ $titulo }}</h3>
            </div>
        </div>

        {{-- Itens --}}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            @foreach ($carrinho['itens'] as $item)
                <div class="flex items-center justify-between px-5 py-3">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-gray-600 dark:text-gray-300 capitalize truncate" title="{{ $item['Description'] ?? '' }}">
                            {{ $item['Description'] ?? '---' }}
                        </p>
                        @if (($item['Quantity'] ?? 1) > 1)
                            <p class="text-xs text-gray-400">Qtd: {{ $item['Quantity'] }}</p>
                        @endif
                    </div>
                    <div class="ml-4 text-sm font-medium text-gray-800 dark:text-gray-200 whitespace-nowrap">
                        {{ ($item['UnitPrice'] ?? false) ? convertMoney($item['UnitPrice'], 'R$ ') : '---' }}
                    </div>
                </div>
            @endforeach

            {{-- Total --}}
            @if ($carrinho['total'] ?? false)
                <div class="flex items-center justify-between px-5 py-4 bg-indigo-50 dark:bg-indigo-950/30">
                    <div class="text-sm font-bold text-indigo-900 dark:text-indigo-200 uppercase">
                        {{ $carrinho['total']['Description'] ?? 'Valor Total' }}
                    </div>
                    <div class="text-lg font-bold text-indigo-700 dark:text-indigo-300">
                        {{ ($carrinho['total']['UnitPrice'] ?? false) ? convertMoney($carrinho['total']['UnitPrice'], 'R$ ') : '---' }}
                    </div>
                </div>
            @endif
        </div>
    </div>
@endif