@props(['items' => collect()])

@if($items->count())
  <div class="relative overflow-hidden bg-gradient-to-l from-red-600 via-red-500 to-red-700 dark:from-red-800 dark:via-red-700 dark:to-red-900 text-black shadow-lg backdrop-blur-md">
    <div class="container mx-auto px-4 py-2 flex items-center gap-4 overflow-hidden">

      {{-- ⚡ أيقونة عاجل --}}
      <div class="flex items-center gap-2 font-extrabold text-sm tracking-wide bg-white/20 px-3 py-1 rounded-full shadow-inner backdrop-blur-md animate-pulse">
        <i class="fa-solid fa-bolt-lightning text-yellow-300"></i>
        <span>خبر</span>
      </div>

      {{-- 📰 النصوص المتحركة --}}
      <div
        x-data="{ i: 0, items: @js($items->map(fn($r) => ['t' => $r->title, 'u' => $r->url])) }"
        x-init="setInterval(() => i = (i + 1) % items.length, 4000)"
        class="relative flex-1 overflow-hidden text-sm"
      >
        <template x-if="items.length">
          <a 
            :href="items[i].u ?? '#'"
            class="block animate-marquee whitespace-nowrap font-medium hover:underline transition"
            x-text="items[i].t">
          </a>
        </template>
      </div>
    </div>

    {{-- 🎵 الحركة الانسيابية للنص --}}
    <style>
      @keyframes marquee {
        0%   { transform: translateX(100%); opacity: 0.3; }
        10%  { opacity: 1; }
        100% { transform: translateX(-100%); opacity: 0.3; }
      }
      .animate-marquee {
        animation: marquee 15s linear infinite;
      }
    </style>
  </div>
@endif