import { gsap } from "gsap";
import horizontalLoop from "./../../constants/horizontalLoop"
import Image from "next/image";
import { useEffect, useRef } from "react";

import styles from "./marquee.module.css"

const Marquee = (props) => {
    const content = props.images
    const mark = useRef<HTMLDivElement>(null)
    const urlBase = process.env.NEXT_PUBLIC_BASE_URL

    // It's important to keep both children and the Horizontal loop away from eachother
    useEffect(()=>{
        const markDiv = mark.current as HTMLDivElement;
         const contentArray = gsap.utils.toArray(markDiv?.children);
            horizontalLoop(contentArray, {
                repeat: -1,
                paused: false,
                duration: 5,
                paddingRight: 24,
              });
    },[mark])


  return (
    <div id={styles.marquee}>
        <div className={styles.marquee_inner} ref={mark}> 
            <div><Image className={styles.item} src={`${urlBase}${content[0].attributes.formats.medium.url}`} width={600} height={600} alt="Image 1"  /></div>
            <div><p className={styles.item}>Get in touch</p></div>
            <div><Image className={styles.item} src={`${urlBase}${content[1].attributes.formats.medium.url}`} width={600} height={600} alt="Image 2"  /></div>
            <div><p className={styles.item}>Entra em contacto</p></div>
            <div><Image className={styles.item} src={`${urlBase}${content[2].attributes.formats.medium.url}`} width={600} height={600} alt="Image 3"  /></div>
            <div><p className={styles.item}>Get in touch</p></div>
            <div><Image className={styles.item} src={`${urlBase}${content[3].attributes.formats.medium.url}`} width={600} height={600} alt="Image 4"  /></div>
            <div><p className={styles.item}>Entra em contacto</p></div>

        </div>

    </div>
  );
};

export default Marquee;