@props(['users' => [], 'limit' => 5, 'viewAll' => false])

<div class="overflow-hidden rounded-xl border border-border bg-card shadow-card">
    <div class="flex items-center justify-between border-b border-border px-6 py-4">
        <h3 class="text-base font-semibold text-foreground">Recent Users</h3>
        @if($viewAll !== false)
        <x-buttons.secondary href="{{$viewAll}}" size="sm">View all</x-buttons.secondary>
        @endif
    </div>
    <div class="divide-y divide-border">
        @forelse(collect($users)->take($limit) as $user)
            <div class="flex items-center gap-4 px-6 py-3.5">
                <x-utility.avatar
                    :src="$user->avatar ?? null"
                    :name="$user->name"
                    size="sm"
                />
                <div class="min-w-0 flex-1">
                    <p class="truncate text-sm font-medium text-foreground">{{ $user->name }}</p>
                    <p class="truncate text-xs text-muted-foreground">{{ $user->email }}</p>
                </div>
                <span class="inline-flex flex-shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">{{ $user->role ?? 'User' }}</span>
            </div>
        @empty
            <div class="px-6 py-8 text-center text-sm text-muted-foreground">No users yet.</div>
        @endforelse
    </div>
</div>