@props(['author'])

<div class="bg-white border border-gray-200 rounded-lg p-6 flex flex-col items-center text-center">
    @if($author->avatar)
        <img src="{{ asset('storage/' . $author->avatar) }}" alt="{{ $author->name }}" class="w-20 h-20 rounded-full object-cover mb-4">
    @else
        <div class="w-20 h-20 rounded-full bg-gray-200 flex items-center justify-center mb-4">
            <span class="text-2xl font-bold text-gray-500">{{ strtoupper(substr($author->name, 0, 2)) }}</span>
        </div>
    @endif
    <h3 class="text-lg font-bold text-gray-900">{{ $author->name }}</h3>
    @if($author->position)
        <p class="text-sm text-gray-500 mt-1">{{ $author->position }}</p>
    @endif
    @if($author->bio)
        <p class="text-sm text-gray-600 mt-3 line-clamp-3">{{ $author->bio }}</p>
    @endif
    <a href="{{ route('authors.show', $author->slug) }}" class="mt-4 text-red-600 text-sm font-semibold hover:underline">View articles</a>
</div>