import Link from "next/link";

export function BreakingTicker({ items }: { items: Array<{ title: string; slug: string }> }) {
  if (!items.length) return null;

  return (
    <div className="border-y border-cyanx/20 bg-cyanx/8">
      <div className="mx-auto flex max-w-7xl items-center overflow-hidden px-4 py-3 sm:px-6 lg:px-8">
        <span className="mr-4 shrink-0 rounded-full bg-cyanx px-3 py-1 text-xs font-black uppercase text-ink">Breaking</span>
        <div className="flex min-w-0 animate-[ticker_26s_linear_infinite] gap-8 whitespace-nowrap text-sm text-white/78">
          {[...items, ...items].map((item, index) => (
            <Link key={`${item.slug}-${index}`} href={`/article/${item.slug}`} className="hover:text-cyanx">
              {item.title}
            </Link>
          ))}
        </div>
      </div>
      <style>{`@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </div>
  );
}