'use client';

import React, { useEffect, useRef } from 'react';

interface CustomVideoPlayerProps {
    url: string;
    playing?: boolean;
    muted?: boolean;
    loop?: boolean;
    controls?: boolean;
}

export default function VideoPlayer({
    url,
    playing = true,
    muted = true,
    loop = true,
    controls = false
}: CustomVideoPlayerProps) {
    const videoRef = useRef<HTMLVideoElement>(null);

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

        if (playing) {
            video.play().catch(error => {
                console.error('Auto-play was prevented:', error);
            });
        } else {
            video.pause();
        }
    }, [playing]);

    return (
        <div className="w-full" style={{ aspectRatio: '16/9' }}>
            <video
                ref={videoRef}
                src={url}
                muted={muted}
                loop={loop}
                controls={controls}
                className="w-full h-full object-cover"
                preload="metadata"
                onContextMenu={(e) => e.preventDefault()}
            />
        </div>
    );
}