import { SmileyIcon } from './SmileyIcon';

interface MarqueeProps {
  items: readonly string[];
  variant?: 'ink' | 'lime';
  italicItems?: readonly string[];
  speed?: number;
}

export function Marquee({ items, variant = 'ink', italicItems = [], speed = 40 }: MarqueeProps) {
  const doubled = [...items, ...items];
  const faceColor = variant === 'lime' ? '#FFFFFF' : '#1E5EFF';
  const featColor = variant === 'lime' ? '#0F0F10' : '#FFFFFF';

  return (
    <div
      className={`ds-marquee${variant === 'lime' ? ' ds-marquee--lime' : ''}`}
      aria-hidden="true"
      role="presentation"
    >
      <div className="ds-marquee-track" style={{ animationDuration: `${speed}s` }}>
        {doubled.map((item, i) => (
          <span key={i} className="ds-marquee-item" style={{ display: 'inline-flex', alignItems: 'center', gap: 40 }}>
            {italicItems.includes(item) ? (
              <span className="ds-italic">{item}</span>
            ) : (
              item
            )}
            <span className="ds-marquee-dot">
              <SmileyIcon faceColor={faceColor} featColor={featColor} />
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}