import React from 'react';
import { ArrowTopRightIcon } from './icons';

interface BoldIdeasCarouselProps {
  ideas: string[];
  direction?: 'normal' | 'reverse';
  duration?: string;
}

const BoldIdeasCarousel: React.FC<BoldIdeasCarouselProps> = ({ ideas, direction = 'normal', duration = '72s' }) => {
  return (
    <div className="w-full overflow-hidden">
      <div 
        className="flex w-fit" 
        style={{ animation: `auto-scroll ${duration} linear infinite`, animationDirection: direction }}
      >
        {/* Render the list twice for seamless loop */}
        {[...ideas, ...ideas].map((idea, index) => (
          <div key={`${direction}-idea-${index}`} className="group relative mx-1 flex w-72 items-center justify-center self-stretch rounded-md bg-slate-50 p-4 transition-all hover:bg-slate-100">
            <a href="#" onClick={(e) => e.preventDefault()} className="text-sm text-center text-slate-700 font-medium cursor-default">
              {idea}
              <ArrowTopRightIcon className="ml-1.5 inline-block h-3 w-3 -translate-y-px transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-1" />
            </a>
          </div>
        ))}
      </div>
    </div>
  );
};

export default BoldIdeasCarousel;