// General-platform marquee tokens. The Vulai event page passes its own Luhya
// set via the `words` prop (see /events/vulai).
const DEFAULT_WORDS = [
  "CONCERTS",
  "FESTIVALS",
  "GAMING",
  "WELLNESS",
  "NIGHTLIFE",
  "CORPORATE",
  "COMEDY",
  "LIVE BANDS",
  "INSTANT M-PESA",
];

export default function Marquee({ words = DEFAULT_WORDS }: { words?: string[] }) {
  // Duplicated once so the -50% keyframe loops seamlessly.
  const run = [...words, ...words];
  return (
    <div className="overflow-hidden border-y border-line bg-brand-green-panel py-3">
      <div className="marquee-track">
        {run.map((w, i) => (
          <span
            key={i}
            className="mx-6 text-sm font-semibold uppercase tracking-widest text-white"
          >
            {w} <span className="mx-3 text-brand-green-h">✺</span>
          </span>
        ))}
      </div>
    </div>
  );
}