import { useEffect, useRef } from 'react';
import HLS from 'hls.js';

export const VideoPlayer: React.FC<{ src: string }> = ({ src }) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const hlsRef = useRef<HLS | null>(null);

  useEffect(() => {
    if (videoRef.current && !HLS.isSupported()) {
      videoRef.current.src = src;
      videoRef.current.play();
    } else if (HLS.isSupported() && src.includes('.m3u8')) {
      const hls = new HLS(src);
      hls.loadSource(src);
      hls.attachMedia(videoRef.current);
      hls.on(HLS.Events.ERROR, () => console.error('Error de carga en HLS'));
    }
  }, [src]);

  return <video ref={videoRef} controls />;
};