import Button from "@mui/material/Button";
import { motion } from "framer-motion";
import React from "react";

const ThreeDMarquee = ({ images = [], className = "", cols = 4, onImageClick }) => {
   // Clone the image list twice
  const duplicatedImages = [...images, ...images];

  const groupSize = Math.ceil(duplicatedImages.length / cols);
  const imageGroups = Array.from({ length: cols }, (_, index) =>
    duplicatedImages.slice(index * groupSize, (index + 1) * groupSize)
  );

  const handleImageClick = (image, globalIndex) => {
    if (onImageClick) {
      onImageClick(image, globalIndex);
    } else if (image.href) {
      window.open(image.href, image.target || "_self");
    }
  };

  return (
    <section
      className={`mx-auto block h-[680px] max-sm:h-[400px]  rounded-[10px]
        overflow-hidden  bg-[#034E08]  relative ${className} max-w-[1400px]  ` }

style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14, 1) 70%)"}}
    >
<div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
<div className="absolute top-0 left-0 w-full h-[200px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0) 70% )"}} />
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px]  absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px]  bg-[#a7071099]">

  <h2 className="text-center text-[45px] font-900 pb-2">Now, chat for free !</h2>
  <p className="text-center text-[22px] font-900 pb-4">Finding your perfect match just become easier</p>
  <div className="flex  itemes-center justify-center ">
  <Button variant="contained"  size="medium" sx={{width:"fit-content", padding:"10px 20px"}}>Regsiter Now</Button>
  </div>
</div>

{/* <div className="absolute top-0 left-0 w-full h-full " style={{background: "#00000", zIndex:"1"}} /> */}

      <div
        className="flex w-full h-full items-center justify-center"
        style={{
          transform: "rotateX(55deg) rotateY(0deg) rotateZ(45deg)",
        }}
      >
        <div className="w-full overflow-hidden scale-90 sm:scale-100">
          <div
            className={`relative grid h-full w-full origin-center 
              grid-cols-4 sm:grid-cols-${cols} gap-4 transform 
              `}
          >
            {imageGroups.map((imagesInGroup, idx) => (
              <motion.div
                key={`column-${idx}`}
                animate={{ y: idx % 2 === 0 ? 100 : -100 }}
                transition={{
                  // duration: idx % 2 === 0 ? 20 : 15,
                 duration: idx % 2 === 0 ? 5 : 4,
                  ease: "linear",
                  repeat: Infinity,
                  repeatType: "reverse",
                }}
                className="flex flex-col items-center gap-6 relative"
              >
                <div className="absolute left-0 top-0 h-full w-0.5 " />
                {imagesInGroup.map((image, imgIdx) => {
                  const globalIndex = idx * groupSize + imgIdx;
                  const isClickable = image.href || onImageClick;

                  return (
                    <div key={`img-${imgIdx}`} className="relative">
                      <div className="absolute top-0 left-0 w-full h-0.5 " />
                      <div className="max-w-[300px] h-[290px] rounded-lg overflow-hidden bg-white">
                      <motion.img
                        whileHover={{ y: -10 }}
                        transition={{ duration: 0.3, ease: "easeInOut" }}
                        src={image.src}
                        alt={image.alt}
                        width={970}
                        height={700}
                        className={`aspect-[970/700] w-full h-full  object-cover  shadow-xl hover:shadow-2xl transition-shadow duration-300 ${
                          isClickable ? "cursor-pointer" : ""
                        }`}
                        onClick={() => handleImageClick(image, globalIndex)}
                      />
                      </div>
                    </div>
                  );
                })}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ThreeDMarquee;