import { useEffect, useRef } from 'react';

/**
 * YouTube video embedding component
 * @param {Object} props
 * @param {string} props.videoId - YouTube video ID to embed
 * @param {boolean} props.autoplay - Whether to autoplay the video (default: false)
 */
const YouTubeEmbed = ({ videoId, autoplay = false }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!videoId || !containerRef.current) return;

    // Create iframe element
    const iframe = document.createElement('iframe');
    
    // Set iframe attributes
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.src = `https://www.youtube.com/embed/${videoId}?rel=0&showinfo=0${autoplay ? '&autoplay=1' : ''}`;
    iframe.title = 'YouTube video player';
    iframe.frameBorder = '0';
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    
    // Clear container and append iframe
    containerRef.current.innerHTML = '';
    containerRef.current.appendChild(iframe);
    
    // Cleanup function
    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
      }
    };
  }, [videoId, autoplay]);
  
  return (
    <div className="youtube-embed" ref={containerRef}>
      {/* YouTube iframe will be inserted here */}
    </div>
  );
};

export default YouTubeEmbed;