@props(['story'])

<a href="{{ route('stories.show', $story->slug) }}"
   class="group block overflow-hidden rounded-xl border border-gray-700 bg-gray-800/70 shadow-lg transition-transform duration-200 hover:scale-[1.02] hover:border-sky-500/40">
    @if($story->cover_url)
        <div class="aspect-video overflow-hidden bg-gray-900">
            <img src="{{ $story->cover_url }}" alt="{{ $story->title }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
        </div>
    @else
        <div class="aspect-video bg-gradient-to-br from-gray-900 via-slate-900 to-sky-950"></div>
    @endif

    <div class="space-y-3 p-4">
        <h3 class="line-clamp-2 text-lg font-bold text-white">{{ $story->title }}</h3>

        <div class="flex items-center gap-2 text-sm text-gray-300">
            <img
                src="{{ $story->creator?->profile?->avatar_hash ? \App\Support\AvatarUrl::forUser((int) $story->creator->id, $story->creator->profile->avatar_hash, 48) : \App\Support\AvatarUrl::default() }}"
                alt="{{ $story->creator?->username ?? 'Creator' }}"
                class="h-6 w-6 rounded-full border border-gray-600 object-cover"
            />
            <span>{{ $story->creator?->username ?? 'Unknown creator' }}</span>
            @if($story->published_at)
                <span class="text-gray-500">•</span>
                <time datetime="{{ $story->published_at->toIso8601String() }}" class="text-gray-400">
                    {{ $story->published_at->format('M j, Y') }}
                </time>
            @endif
        </div>

        <div class="flex items-center gap-3 text-xs text-gray-400">
            <span>{{ $story->reading_time }} min read</span>
            <span>{{ number_format((int) $story->likes_count) }} likes</span>
            <span>{{ number_format((int) $story->comments_count) }} comments</span>
            <span>{{ number_format((int) $story->views) }} views</span>
        </div>
    </div>
</a>