import React, { 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);
  const [isPlaying, setIsPlaying] = useState(false);

  const handleToggle = () => {
    if (!videoRef.current) return;

    if (videoRef.current.paused) {
      videoRef.current.play();
      setIsPlaying(true);
    } else {
      videoRef.current.pause();
      setIsPlaying(false);
    }
  };

  return (
    <section className="Farm_vdo_holder">
      <div className="container">
        <div className="vdo_play_holder">
          <div className="vdo_holder">
            <video
              ref={videoRef}
              src={process.env.NEXT_PUBLIC_IMG_URL + about_us?.video}
              className="Farm_vdo"
              muted
              loop
              autoplay
            />
          </div>
          <div className="play_btn_holder">
            {/* <h4>A Something About Us</h4> */}
            <FontAwesomeIcon
              className="play_icon"
              onClick={handleToggle}
              icon={isPlaying ? faCirclePause : faCirclePlay}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

export default Banner_vdo;
