import { useEffect, useRef } from 'react';
import { cn } from '@/lib/utils';
import { getSectionBackground } from '@/lib/sectionStyles';

interface MarqueeBannerProps {
  id: string;
  text?: string;
  speed?: number; // seconds for one full cycle
  separator?: string;
  styles?: Record<string, any>;
}

export function MarqueeBanner({
  id,
  text = 'Free shipping on orders over $50 ✦ New arrivals every week ✦ Limited time deals',
  speed = 30,
  separator = '✦',
  styles,
}: MarqueeBannerProps) {
  const sectionBg = getSectionBackground(styles);
  const items = text.split(separator).map(t => t.trim()).filter(Boolean);

  return (
    <section
      id={id}
      className="wn-section wn-marquee overflow-hidden py-3"
      style={{
        backgroundColor: sectionBg.style?.backgroundColor || 'var(--wn-primary, #1a1a1a)',
        color: sectionBg.style?.color || '#fff',
      }}
    >
      <div className="flex whitespace-nowrap">
        {/* Duplicate twice for seamless infinite scroll */}
        {[0, 1].map((i) => (
          <div
            key={i}
            className={cn('flex items-center gap-8 pr-8 shrink-0', 'animate-marquee')}
            style={{ animationDuration: `${speed}s` }}
            aria-hidden={i === 1}
          >
            {items.map((item, idx) => (
              <span key={idx} className="flex items-center gap-8 text-sm font-medium tracking-wide uppercase">
                {item}
                {idx < items.length - 1 && <span className="opacity-50 text-xs">●</span>}
              </span>
            ))}
          </div>
        ))}
      </div>
    </section>
  );
}
