const { useRef, useEffect } = React;

const VideoPlayer = ({ videoUrl, currentTime, onTimeUpdate, onDurationChange, setVideoRef }) => {
    const videoRef = useRef(null);

    useEffect(() => {
        if (setVideoRef) {
            setVideoRef(videoRef.current);
        }
    }, [setVideoRef]);

    useEffect(() => {
        // Sync video time if external currentTime changes significantly (scrubbing)
        // We use a threshold to avoid feedback loops
        if (videoRef.current && Math.abs(videoRef.current.currentTime - currentTime) > 0.5) {
            videoRef.current.currentTime = currentTime;
        }
    }, [currentTime]);

    return (
        <div className="relative rounded-2xl overflow-hidden bg-black shadow-2xl ring-1 ring-white/10 group">
            <video
                ref={videoRef}
                src={videoUrl}
                className="w-full aspect-video object-contain"
                controls
                onTimeUpdate={(e) => onTimeUpdate(e.target.currentTime)}
                onDurationChange={(e) => onDurationChange(e.target.duration)}
                playsInline
            />

            {/* Overlay gradient only when controls are hidden/hovered? Standard native controls are fine for now. */}
            <div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_100px_rgba(0,0,0,0.5)] rounded-2xl"></div>
        </div>
    );
};

window.VideoPlayer = VideoPlayer;