@props([
    'employee' => null,
    'className' => ''
])

@php
    $statusColors = [
        'active' => 'bg-success text-white',
        'inactive' => 'bg-secondary text-white',
        'on-leave' => 'bg-warning text-dark'
    ];
    
    $statusLabels = [
        'active' => 'Active',
        'inactive' => 'Inactive',
        'on-leave' => 'On Leave'
    ];
    
    $employee = $employee ?? (object)[
        'id' => '1',
        'name' => 'John Doe',
        'email' => 'john.doe@company.com',
        'phone' => '+1 (555) 123-4567',
        'position' => 'Software Engineer',
        'department' => 'Engineering',
        'location' => 'San Francisco, CA',
        'status' => 'active',
        'joinDate' => '2024-01-15',
        'avatar' => null
    ];
@endphp

<div class="card {{ $className }} h-100 transition-all duration-300 hover:shadow-lg hover:scale-105 bg-gradient-card border-0">
    <div class="card-body p-4">
        <div class="d-flex align-items-start justify-content-between mb-4">
            <div class="d-flex align-items-center">
                <div class="avatar avatar-lg me-3">
                    @if($employee->avatar)
                        <img src="{{ $employee->avatar }}" alt="{{ $employee->name }}" class="rounded-circle">
                    @else
                        <div class="avatar-initial bg-primary rounded-circle d-flex align-items-center justify-content-center">
                            <span class="text-white fw-bold">
                                {{ collect(explode(' ', $employee->name))->map(fn($n) => $n[0])->join('') }}
                            </span>
                        </div>
                    @endif
                </div>
                <div>
                    <h5 class="card-title mb-1 fw-semibold">{{ $employee->name }}</h5>
                    <p class="card-text text-muted small mb-0">{{ $employee->position }}</p>
                </div>
            </div>
            
            <div class="d-flex align-items-center">
                <span class="badge {{ $statusColors[$employee->status] ?? $statusColors['active'] }} me-2">
                    {{ $statusLabels[$employee->status] ?? 'Active' }}
                </span>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
                        <i class="bx bx-dots-horizontal-rounded"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#"><i class="bx bx-user me-2"></i>View Profile</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bx bx-edit me-2"></i>Edit Details</a></li>
                        <li><a class="dropdown-item" href="#"><i class="bx bx-time me-2"></i>View Attendance</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-danger" href="#"><i class="bx bx-user-x me-2"></i>Deactivate</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="space-y-3">
            <div class="d-flex align-items-center text-muted small">
                <i class="bx bx-map-pin me-2"></i>
                <span>{{ $employee->department }} • {{ $employee->location }}</span>
            </div>
            
            <div class="d-flex align-items-center text-muted small">
                <i class="bx bx-envelope me-2"></i>
                <a href="mailto:{{ $employee->email }}" class="text-decoration-none text-muted hover-primary">
                    {{ $employee->email }}
                </a>
            </div>
            
            <div class="d-flex align-items-center text-muted small">
                <i class="bx bx-phone me-2"></i>
                <a href="tel:{{ $employee->phone }}" class="text-decoration-none text-muted hover-primary">
                    {{ $employee->phone }}
                </a>
            </div>
        </div>

        <div class="d-flex align-items-center justify-content-between mt-4 pt-3 border-top">
            <small class="text-muted">
                Joined {{ \Carbon\Carbon::parse($employee->joinDate)->format('M d, Y') }}
            </small>
            <button class="btn btn-sm btn-outline-primary hover-bg-primary hover-text-white">
                View Details
            </button>
        </div>
    </div>
</div>