import { useEffect, useRef } from "react";

interface FeatureVideoViewBoxProps {
  video: string;
}

function FeatureVideoViewBox({ video }: FeatureVideoViewBoxProps) {
  //   const videoRef = useRef<HTMLVideoElement>(null);
  const videoContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!video || !videoContainerRef.current) return;

    const videoEl = document.createElement("video");
    videoEl.src = video;
    videoEl.muted = true;
    videoEl.autoplay = true;
    videoEl.loop = true;
    videoEl.playsInline = true;
    videoEl.preload = "metadata";
    videoEl.classList.add("absolute", "h-fit");
    // videoEl.onloadeddata = () => console.log("onloadeddata");

    videoContainerRef.current.appendChild(videoEl);

    if (videoContainerRef.current.childElementCount > 1) {
      setTimeout(() => {
        videoContainerRef.current?.firstElementChild?.remove();
      }, 5000);
    }
  }, [video]);

  return <div ref={videoContainerRef} className="relative h-fit"></div>;
}

export default FeatureVideoViewBox;
