src/components/video-players.tsx

"use client";

import { useEffect, useRef } from 'react';
import type { IAgoraRTCRemoteUser, ICameraVideoTrack } from "agora-rtc-sdk-ng";

export const LocalVideoPlayer = ({ videoTrack }: { videoTrack: ICameraVideoTrack }) => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const playerRef = ref.current;
        if (!playerRef) return;
        
        videoTrack.play(playerRef);

        return () => {
            try {
                videoTrack.stop();
            } catch (e) {
                console.warn("Error stopping local video track:", e);
            }
        };
    }, [videoTrack]);

    return <div ref={ref} className="w-full h-full" />;
};


export const RemoteVideoPlayer = ({ user }: { user: IAgoraRTCRemoteUser }) => {
    const ref = useRef<HTMLDivElement>(null);
    const hasPlayed = useRef(false);

    useEffect(() => {
        const playerRef = ref.current;
        if (!playerRef || !user.videoTrack || hasPlayed.current) return;
        
        console.log(`[RemotePlayer] Playing video for user ${user.uid}`);
        user.videoTrack.play(playerRef);
        hasPlayed.current = true;
        
        return () => {
            console.log(`[RemotePlayer] Stopping video for user ${user.uid}`);
            try {
                user.videoTrack?.stop();
                hasPlayed.current = false;
            } catch (e) {
                console.warn(`[RemotePlayer] Error stopping remote video for user ${user.uid}:`, e);
            }
        };
    }, [user, user.videoTrack]);

    return <div ref={ref} className="w-full h-full" />;
};