import React, { FC } from 'react';
import { motion } from 'framer-motion';

interface MarqueeProps {
  gifs: string[];
}

/**
 * Marquee Section: Two rows of scrolling GIFs.
 */
export const MarqueeSection: FC<MarqueeProps> = ({ gifs }) => {
  // Helper function to create the full set of images for seamless looping
  const getRowImages = (gifs: string[], direction: 'right' | 'left') => {
    // Tripling the images for seamless scrolling
    const fullSet = [...gifs, ...gifs, ...gifs];
    return fullSet.map((url, index) => (
      <div key={index} className="flex-shrink-0 w-[420px] h-[270px] relative">
        <img
          src={url}
          alt={`Marquee GIF ${index + 1}`}
          className="w-full h-full object-cover rounded-2xl lazy-load"
          loading="lazy"
        />
      </div>
    ));
  };

  const row1Images = getRowImages(gifs.slice(0, 11), 'right');
  const row2Images = getRowImages(gifs.slice(11), 'left');

  return (
    <section className="py-24 sm:py-32 md:py-40 pb-10 main-wrapper">
      <div className="relative overflow-hidden">
        {/* Row 1: Moves RIGHT */}
        <div
          className="flex w-full gap-3 py-4"
          style={{ willChange: 'transform' }}
          // The actual scrolling logic needs to be handled by a custom hook/component
          // For now, we set up the structure and assume the scroll listener will apply the transform.
          // The total width is 3 * 11 * 420px + 10 * 24px gap
        >
          {row1Images}
        </div>

        {/* Row 2: Moves LEFT */}
        <div
          className="flex w-full gap-3 py-4"
          style={{ willChange: 'transform' }}
        >
          {row2Images}
        </div>
      </div>
    </section>
  );
};