import React from 'react'
import './LogoMarquee.css'

/**
 * Scrolling logo marquee showing clients/partners/media.
 * Supports variant="dark" (default) and variant="light" for visibility of different logo colors.
 */
export default function LogoMarquee({ logos = [], title = '', titleAccent = '', variant = 'dark' }) {
  if (logos.length === 0) return null

  // Duplicate logos for seamless loop
  const allLogos = [...logos, ...logos, ...logos]

  return (
    <section className={`marquee-section marquee-${variant}`}>
      {(title || titleAccent) && (
        <h2 className="marquee-title section-title">
          {title} {titleAccent && <span className="text-gradient">{titleAccent}</span>}
        </h2>
      )}
      <div className="marquee-track">
        <div className="marquee-inner">
          {allLogos.map((logo, i) => (
            <div className="marquee-item" key={i} aria-hidden={i >= logos.length}>
              {logo.src ? (
                <img src={logo.src} alt={logo.name} />
              ) : (
                <span className="marquee-text-logo">{logo.name}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}