"use client";
import Link from "next/link";
import { Post, postUrl } from "@/lib/wordpress";

export default function BreakingTicker({ posts }: { posts: Post[] }) {
  if (!posts.length) return null;
  const items = [...posts, ...posts]; // duplicate for seamless loop

  return (
    <div className="bg-brand-500 text-white flex items-center overflow-hidden h-9">
      <span className="shrink-0 bg-navy-900 text-white text-xs font-bold uppercase tracking-widest px-4 h-full flex items-center z-10">
        Breaking
      </span>
      <div className="relative flex-1 overflow-hidden">
        <div className="flex animate-ticker whitespace-nowrap gap-12">
          {items.map((p, i) => (
            <Link key={`${p.id}-${i}`} href={postUrl(p)}
              className="text-sm font-medium hover:underline shrink-0">
              {p.title}
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}
