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 for seamless looping
  const marqueeText = titles.join(' --- ') + ' --- ' + titles.join(' --- ');

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