import Link from 'next/link';

interface BreakingItem { id: number; title: string; slug: string; }

export default function BreakingNewsTicker({ items }: { items: BreakingItem[] }) {
  if (!items.length) return null;

  // Duplicate the list so the -50% marquee translate loops seamlessly.
  const loop = [...items, ...items];

  return (
    <div className="border-y border-accent-600 bg-accent-600 text-white">
      <div className="container-page flex h-11 items-center gap-3">
        <span className="z-10 flex flex-shrink-0 items-center gap-1.5 rounded bg-white px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-accent-600 shadow-sm">
          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-accent-600" />
          Breaking
        </span>

        <div className="ticker-pause relative min-w-0 flex-1 overflow-hidden">
          <div className="animate-ticker">
            {loop.map((item, i) => (
              <Link
                key={`${item.id}-${i}`}
                href={`/article/${item.slug}`}
                aria-hidden={i >= items.length}
                tabIndex={i >= items.length ? -1 : 0}
                className="group mx-6 inline-flex items-center gap-2 text-sm font-medium"
              >
                <span className="inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-white/60 group-hover:bg-white" />
                <span className="group-hover:underline">{item.title}</span>
              </Link>
            ))}
          </div>
          {/* Fade edges */}
          <div className="pointer-events-none absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-accent-600 to-transparent" />
          <div className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-accent-600 to-transparent" />
        </div>
      </div>
    </div>
  );
}