@props([
    'titulo'  => 'Dados do Aluno',
    'icon'    => 'user',
    'aluno'   => null,
    'compact' => false,
    'alterar' => false,
])

<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden">
    {{-- Header do card --}}
    <div class="bg-gradient-to-r from-indigo-600 to-indigo-700 px-5 py-3">
        <div class="flex items-center justify-between gap-2">
            <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>
            @if ($alterar)
                <button wire:click="alterarDocumento"
                    class="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-semibold text-indigo-600
                           bg-white border border-indigo-200 rounded-lg
                           hover:bg-indigo-50 transition-all whitespace-nowrap">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
                    Alterar
                </button>
            @endif
        </div>
    </div>

    {{-- Conteúdo --}}
    <div class="divide-y divide-gray-100 dark:divide-gray-800">
        @if ($aluno)
            {{-- Nome --}}
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide">Nome Completo</div>
                <div class="sm:w-2/3 text-sm font-medium text-gray-800 dark:text-gray-200 capitalize">
                    {{ $aluno->nome ?? '---' }} {{ $aluno->sobrenome ?? '' }}
                </div>
            </div>

            {{-- Documento --}}
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide">Documento</div>
                <div class="sm:w-2/3 text-sm text-gray-800 dark:text-gray-200">
                    <span class="uppercase font-medium">{{ $aluno->doc_tipo ?? '---' }}</span>
                    <span class="ml-1">{{ putMask($aluno->doc_num ?? '', $aluno->doc_tipo ?? 'cpf') }}</span>
                </div>
            </div>

            {{-- Email --}}
            <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                <div class="sm:w-1/3 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide">Email</div>
                <div class="sm:w-2/3 text-sm text-gray-800 dark:text-gray-200 lowercase">{{ $aluno->email ?? '---' }}</div>
            </div>

            @if (!$compact)
                {{-- Nascimento --}}
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-1/3 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide">Nascimento</div>
                    <div class="sm:w-2/3 text-sm text-gray-800 dark:text-gray-200">
                        {{ ($aluno->nascimento ?? false) ? dataData($aluno->nascimento, true) : '---' }}
                    </div>
                </div>

                {{-- Contato --}}
                <div class="flex flex-col sm:flex-row sm:items-center px-5 py-3 gap-1 sm:gap-0">
                    <div class="sm:w-1/3 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wide">Contato</div>
                    <div class="sm:w-2/3 text-sm text-gray-800 dark:text-gray-200">
                        {{ ($aluno->tel_cod ?? false) ? '+' . $aluno->tel_cod : '' }}
                        {{ $aluno->tel_ddd ?? '' }}
                        {{ putMask($aluno->tel_num ?? '', 'tel_num') }}
                    </div>
                </div>
            @endif
        @endif

        {{-- Slot para conteúdo adicional --}}
        {{ $slot }}
    </div>
</div>