import Image from "next/image";
import Marquee from "react-fast-marquee";

export default function HomeMarquee() {
  return (
    <div className="bg-[#1e1d1c] py-5">
      <Marquee>
        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
          <Image
            src="/images/home/videoSlide1.jpg"
            alt="images"
            fill
            priority
            className="object-cover"
          />
        </div>
        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
          <Image
            src="/images/home/videoSlide2.jpg"
            alt="images"
            fill
            className="object-cover"
          />
        </div>
        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
          <Image
            src="/images/home/videoSlide3.jpeg"
            alt="images"
            fill
            className="object-cover"
          />
        </div>
        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
          <Image
            src="/images/home/videoSlide4.jpg"
            alt="images"
            fill
            className="object-cover"
          />
        </div>
        <div className="relative sm:w-125 w-70 sm:h-62.5 h-40 mx-2 overflow-hidden rounded-xl">
          <Image
            src="/images/home/videoSlide5.jpeg"
            alt="images"
            fill
            className="object-cover"
          />
        </div>
      </Marquee>
    </div>
  );
}