import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap";

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

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { 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">
      <Container className="custom_container">
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
        >
          <source src="/image/dummy.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </Container>
    </section>
  );
};

export default Video;