import React, { useEffect, useRef, useState } from "react";
import "./Banner_vdo.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCirclePlay, faCirclePause } from "@fortawesome/free-solid-svg-icons";

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 className="play_btn_holder">            
            <FontAwesomeIcon
              className="play_icon"
              onClick={handleToggle}
              icon={isPlaying ? faCirclePause : faCirclePlay}
            />
          </div> */}
        </div>
      </div>
    </section>
  );
}

export default Banner_vdo;
