videotest

import React, { useRef, useEffect } from "react";
import styled, { keyframes } from "styled-components";
import PropTypes from "prop-types";
import digitalMarketing from "../assets/digitalMarketing.png";

const WrapperContainer = styled.div`
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // background-color: #ccc;
`;

const Wrapper = ({ children }) => {
  return <WrapperContainer>{children}</WrapperContainer>;
};

const moveLeft = keyframes`
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
`;

const MarqueeContainer = styled.div`
  position: relative;
  width: 100vw;
  margin-top: 20px;
  padding: 10px 0;
  background-color: white;
  overflow: hidden;
  &:hover {
    // animation-play-state: paused;
  }
  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    // background-image: linear-gradient(
    //   to right,
    //   #ccc,
    //   transparent 20%,
    //   transparent 80%,
    //   #ccc
    );
  }
`;

const MarqueeArea = styled.div`
  display: inline-block;
  white-space: nowrap;
  transform: translateX(-${(props) => props.move}px);
  animation: ${moveLeft} ${(props) => props.time}s linear infinite
    ${(props) => (props.toRight ? " reverse" : "")};
  animation-play-state: running;
`;

const MarqueeItem = styled.div`
  position: relative;
  display: inline-block;
  margin-right: 2em;
`;

const getFillList = (list, copyTimes = 1) => {
  let newlist = [];
  for (let i = 0; i < copyTimes; i++) {
    newlist.push(...list);
  }
  return newlist;
};

const Marquee = ({ images, time, toRight, ...props }) => {
  const marqueeContainer = useRef(null);
  const marqueeArea = useRef(null);
  const [moveLeft, setMoveLeft] = React.useState(0);
  const [showImages, setShowImages] = React.useState(images);
  const [realTime, setRealTime] = React.useState(time);

  useEffect(() => {
    const containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
    const areaWidth = Math.floor(marqueeArea.current.scrollWidth);
    const copyTimes = Math.max(2, Math.ceil((containerWidth * 2) / areaWidth));
    const newMoveLeft = areaWidth * Math.floor(copyTimes / 2);
    const newRealTime =
      time * parseFloat((newMoveLeft / containerWidth).toFixed(2));
    setShowImages(getFillList(images, copyTimes));
    setMoveLeft(newMoveLeft);
    setRealTime(newRealTime);
  }, [images]);

  return (
    <MarqueeContainer ref={marqueeContainer} {...props}>
      <MarqueeArea
        ref={marqueeArea}
        move={moveLeft}
        time={realTime}
        toRight={toRight}
      >
        {showImages.map((image, index) => {
          return (
            <MarqueeItem key={index}>
              <article class="w-[400px] h-[450px] relative isolate flex flex-col justify-end overflow-hidden rounded-2xl px-8 pb-8 pt-40 max-w-sm mx-auto mt-24">
                <img
                  src={image}
                  alt="University of Southern California"
                  class="absolute inset-0 h-full w-full object-cover"
                />
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
                <h3 class="z-10 mt-3 text-3xl font-bold text-white">MBG</h3>
               
              </article>
            </MarqueeItem>
          );
        })}
      </MarqueeArea>
    </MarqueeContainer>
  );
};

Marquee.propTypes = {
  images: PropTypes.array,
  time: PropTypes.number,
  toRight: PropTypes.bool,
};

Marquee.defaultProps = {
  images: [],
  time: 10,
};

function Awards() {
  // Example image URLs
  const IMAGE_LIST = [
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipMoYh6KmURyG6fGOD-UIev9t-Au1NVtXWMGLnXO=s1360-w1360-h1020",
    "https://lh3.googleusercontent.com/p/AF1QipNIW6HWLT_HC7L4vZmVn2ohyfxlC8DkYITFM1-O=s1360-w1360-h1020",
  ];

  return (
    <div className="flex-col justify-center p-6 text-center ">
      <h1 className="text-4xl font-bold leading-tight sm:text-5xl mb-3">
        {" "}
        Awards{" "}
      </h1>
      <Wrapper>
        <Marquee images={IMAGE_LIST} time={13} />
      </Wrapper>
    </div>
  );
}

export default Awards;