{{--
    Member Card Partial
    Usage: @include('membership.partials.member-card', ['member' => $member])
--}}
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-200">
    {{-- Card Header --}}
    <div class="bg-gradient-to-r from-green-600 to-green-700 px-5 py-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-3">
                    <span class="text-white font-bold text-lg">
                        {{ strtoupper(substr($member->first_name ?? $member->name ?? 'M', 0, 1)) }}{{ strtoupper(substr($member->last_name ?? '', 0, 1)) }}
                    </span>
                </div>
                <div>
                    <h4 class="text-white font-bold text-base leading-tight">
                        {{ $member->full_name ?? ($member->first_name . ' ' . $member->last_name) ?? $member->name ?? 'Member' }}
                    </h4>
                    <p class="text-green-100 text-xs font-mono mt-0.5">
                        {{ $member->membership_code ?? 'N/A' }}
                    </p>
                </div>
            </div>
            {{-- Status Badge --}}
            @php
                $statusColors = [
                    'active'    => 'bg-green-400 text-green-900',
                    'inactive'  => 'bg-gray-400 text-gray-900',
                    'suspended' => 'bg-red-400 text-red-900',
                    'pending'   => 'bg-yellow-400 text-yellow-900',
                ];
                $statusColor = $statusColors[$member->status ?? 'active'] ?? 'bg-gray-400 text-gray-900';
            @endphp
            <span class="px-2.5 py-1 rounded-full text-xs font-semibold {{ $statusColor }}">
                {{ ucfirst($member->status ?? 'Active') }}
            </span>
        </div>
    </div>

    {{-- Card Body --}}
    <div class="px-5 py-4">
        <div class="space-y-2">
            {{-- Membership Category --}}
            @if(isset($member->membershipCategory) || isset($member->membership_category))
                <div class="flex items-center text-sm">
                    <i class="fas fa-tag text-green-500 w-5 mr-2 flex-shrink-0"></i>
                    <span class="text-gray-600">
                        {{ $member->membershipCategory?->name ?? $member->membership_category ?? 'N/A' }}
                    </span>
                </div>
            @endif

            {{-- Email --}}
            @if($member->email ?? false)
                <div class="flex items-center text-sm">
                    <i class="fas fa-envelope text-green-500 w-5 mr-2 flex-shrink-0"></i>
                    <span class="text-gray-600 truncate">{{ $member->email }}</span>
                </div>
            @endif

            {{-- Phone --}}
            @if($member->phone ?? false)
                <div class="flex items-center text-sm">
                    <i class="fas fa-phone text-green-500 w-5 mr-2 flex-shrink-0"></i>
                    <span class="text-gray-600">{{ $member->phone }}</span>
                </div>
            @endif

            {{-- Join Date --}}
            <div class="flex items-center text-sm">
                <i class="fas fa-calendar-alt text-green-500 w-5 mr-2 flex-shrink-0"></i>
                <span class="text-gray-600">
                    Joined {{ $member->created_at?->format('M d, Y') ?? 'N/A' }}
                </span>
            </div>
        </div>
    </div>

    {{-- Card Footer --}}
    @if(isset($showActions) && $showActions !== false)
    <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
        @can('view members')
            <a href="{{ route('membership.admin.members.show', $member) }}"
               class="text-sm text-green-600 hover:text-green-800 font-medium transition">
                <i class="fas fa-eye mr-1"></i>View Details
            </a>
        @endcan
        @can('edit members')
            <a href="{{ route('membership.admin.members.edit', $member) }}"
               class="text-sm text-gray-500 hover:text-gray-700 transition">
                <i class="fas fa-edit mr-1"></i>Edit
            </a>
        @endcan
    </div>
    @endif
</div>
