@props(['post', 'index' => 0])

@php
    $themes = ['bg-red-600', 'bg-black', 'bg-yellow-400'];

    $theme = $themes[$index % 3];
@endphp

<div
    class="group {{ $theme }} rounded-lg shadow-md overflow-hidden flex flex-col h-full hover:shadow-xl transition-all duration-300">
    <a href="{{ route('blog.detail', $post->slug) }}" class="block relative h-64 overflow-hidden">
        <img src="{{ Storage::url($post->image) }}" alt="{{ $post->title }}"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
    </a>
    <div class="p-6 flex flex-col flex-grow">
        @if ($post->category)
            <div class="text-xs font-semibold tracking-wider uppercase mb-2 text-white">
                {{ $post->category->name }}
            </div>
        @endif
        <h3 class="text-xl font-bold mb-3 flex-grow leading-tight text-white">
            <a href="{{ route('blog.detail', $post->slug) }}" class="hover:underline">
                {{ $post->title }}
            </a>
        </h3>
        <div class="mt-4">
            <a href="{{ route('blog.detail', $post->slug) }}"
                class="text-sm font-medium text-white hover:opacity-80 transition-opacity uppercase tracking-wide">
                Leer más
            </a>
        </div>
    </div>
</div>