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">
      <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;