import React, { useState } from 'react';
import YouTube from 'react-youtube';

export function TrackPlayer({ next, queueList, setQueueList }) {
  // Initial list of video IDs (YouTube video IDs)
  const videos = [
    'dQw4w9WgXcQ', // Example Video 1
    'tgbNymZ7vqY', // Example Video 2
    'oHg5SJYRHA0', // Example Video 3
  ];

  // State to track the current video index
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);

  // Function to handle video end event
  const handleVideoEnd = () => {
    // Update to next video or loop to the first video if at the end
    setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videos.length);
  };

  // YouTube video player options
  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 1, // Automatically play the video
    },
  };

  return (
    <div>
      <YouTube
        videoId={videos[currentVideoIndex]} // Use the current video ID
        opts={opts}
        onEnd={handleVideoEnd} // Call handleVideoEnd when the video ends
      />
    </div>
  );
};