/* global React */
// A horizontal auto-scrolling carousel of editorial outfit cards.
// The track is duplicated so the CSS animation loops seamlessly.
function OutfitMarquee({ count = 12, speed = 50 /* seconds for one full loop */ }) {
  const items = Array.from({ length: count }, (_, i) => (i % 12) + 1);
  // Render the list twice so translateX(-50%) lands exactly on the start of the second copy.
  const doubled = [...items, ...items];
  return (
    <section className="cc-marquee" aria-label="Outfit examples">
      <div
        className="cc-marquee-track"
        style={{ animationDuration: `${speed}s` }}
      >
        {doubled.map((idx, i) => (
          <div key={i} className="cc-outfit-card" aria-hidden={i >= count}>
            <div className="cc-outfit-figure">
              <img src={`assets/outfits/outfit-${String(idx).padStart(2, '0')}.png`} alt="" loading="lazy" />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.OutfitMarquee = OutfitMarquee;