import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import { cleanImage } from "../services/imageHandling";

const Video = ({productData}) => {

  const videoRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

 useEffect(() => {
   const observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting) {
         setIsVisible(true);
 
         // 👇 Stop observing after first visibility
         observer.unobserve(entry.target);
       }
     },
     { threshold: 0.5 }
   );
 
   if (videoRef.current) observer.observe(videoRef.current);
 
   return () => {
     if (videoRef.current) observer.unobserve(videoRef.current);
   };
 }, []);

  return (
    <section className="video_sec sec_padd collection-section">
      <div className="custom_containers">
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
        >
          <source src={cleanImage(productData?.video?.url)} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    </section>
  );
};

export default Video;