import { useEffect, useRef } from 'react';
import { CloseIcon } from '../../components/icons/CloseIcon';
import { useModalStore } from '../../stores/modalStore';

interface VideoModalProps {
  link: string;
  currentTime: number;
}

export function VideoModal({ link, currentTime }: VideoModalProps) {
  const { setModal } = useModalStore();

  const handleOnCloseClick = () => {
    setModal(null);
  };

  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.currentTime = currentTime;
  }, [currentTime, videoRef]);

  return (
    <div className="w-screen h-dvh absolute z-[110] top-0 left-0 overflow-hidden flex justify-center items-center">
      <div className="flex items-center justify-center w-full aspect-video">
        <button
          className="p-4 rounded-full border absolute top-4 right-4 z-[100] cursor-pointer"
          onClick={handleOnCloseClick}
        >
          <CloseIcon />
        </button>
        <video src={link} ref={videoRef} autoPlay muted loop playsInline />
      </div>
    </div>
  );
}
