@props([
    'wirid'
])

<a href="{{ route('wirid.show', $wirid->slug) }}"
   class="group block bg-white p-6 rounded-xl shadow-sm border border-gray-100 
          hover:shadow-md hover:border-emerald-100 transition-all duration-300 
          hover:-translate-y-1 h-full flex flex-col">

    {{-- Header with badges --}}
    <div class="flex flex-wrap gap-2 mb-4">
        @if($wirid->category)
            @include('components.badge-category', [
                'label' => $wirid->category->name
            ])
        @endif
        
        <span class="inline-flex items-center text-xs font-medium px-3 py-1.5 
                     rounded-full {{ $wirid->type === 'doa' 
                        ? 'bg-blue-50 text-blue-700 border border-blue-100' 
                        : 'bg-emerald-50 text-emerald-700 border border-emerald-100' }}">
            {{ $wirid->type === 'doa' ? '📖 Doa' : '📿 Wirid' }}
        </span>
    </div>

    {{-- Title --}}
    <h3 class="font-semibold text-lg text-gray-900 mb-3 line-clamp-2
               group-hover:text-emerald-700 transition-colors duration-200">
        {{ $wirid->title }}
    </h3>

    {{-- Preview text --}}
    @if(!empty($wirid->latin_text))
        <div class="mt-auto">
            <p class="text-sm text-gray-600 line-clamp-3 leading-relaxed">
                {{ Str::limit(strip_tags($wirid->latin_text), 140) }}
            </p>
            
            {{-- Read more indicator --}}
            <div class="mt-4 flex items-center text-emerald-600 text-sm font-medium">
                <span>Baca selengkapnya</span>
                <svg class="w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform" 
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </div>
    @endif
</a>