import React from 'react';

interface NewsMarqueeProps {
  titles: string[];
}

export const NewsMarquee: React.FC<NewsMarqueeProps> = ({ titles }) => {
  if (titles.length === 0) {
    return null;
  }

  // Join all titles with a separator and duplicate multiple times for seamless looping
  const fullMarqueeText = Array(4).fill(titles.join(' --- ')).join(' --- ');

  return (
    <div className="fixed bottom-0 left-0 w-full overflow-hidden bg-gray-900 text-yellow-400 py-2 border-t-2 border-yellow-500 z-50 h-10">
      <div className="absolute whitespace-nowrap animate-marquee">
        <span className="text-lg font-bold px-4">
          {fullMarqueeText}
        </span>
      </div>
    </div>
  );
};
