@props(['alerts'])

@if($alerts->isNotEmpty())
    <div class="bg-red-600 text-white overflow-hidden">
        <div class="max-w-7xl mx-auto">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-red-700 px-4 py-3 flex items-center gap-2">
                    <span class="inline-flex items-center justify-center w-5 h-5 bg-white text-red-600 text-xs font-bold rounded-full animate-pulse">LIVE</span>
                    <span class="text-sm font-bold uppercase tracking-wider hidden sm:inline">Breaking</span>
                </div>
                <div class="flex-1 overflow-hidden">
                    <div class="flex animate-marquee whitespace-nowrap py-3">
                        @foreach($alerts as $alert)
                            <a href="{{ route('articles.show', $alert->slug) }}" class="mx-8 text-sm font-medium hover:underline">{{ $alert->title }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif