import React, { useEffect, useRef, useState } from "react";
import "./Banner_vdo.css";

function Banner_vdo({ about_us }) {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && about_us?.video) {
      videoRef.current.load();

      videoRef.current
        .play()
        // .then(() => setIsPlaying(true))
        .catch((err) => console.log(err));
    }
  }, [about_us?.video]);

  return (
    <section className="Farm_vdo_holder">
      <div className="container-fluid p-0">
        <div className="vdo_play_holder">
          <div className="vdo_holder">
            <video
              ref={videoRef}
              className="Farm_vdo"
              autoPlay
              muted
              loop
              playsInline
            >
              <source
                src={process.env.NEXT_PUBLIC_IMG_URL + about_us?.video}
                type="video/mp4"
              />
            </video>
          </div>
        
        </div>
      </div>
    </section>
  );
}

export default Banner_vdo;
