import React, { useState } from 'react';
import './App.css';

function App() {
  const [videoUrl, setVideoUrl] = useState('');
  
  const handlePlay = async () => {
    if (!videoUrl) return;
    // Simulación de llamada a la API de streaming
    // En producción, esto consumiría el endpoint /stream/{path}
    console.log("Reproduciendo video:", videoUrl);
  };
  
  return (
    <div className="App">
      <h1>NetFlux - Tu propio Netflix</h1>
      <input
        type="text"
        placeholder="URL del archivo de video (ej: /videos/movie.mp4)"
        value={videoUrl}
        onChange={(e) => setVideoUrl(e.target.value)}
      />
      <button onClick={handlePlay}>Reproducir</button>
      
      {/* Reproductor HTML5 básico */}
      <video controls width="80%" height="auto">
        <source src="/videos/sample.mp4" type="video/mp4" />
        Tu navegador no soporta el elemento de video.
      </video>
    </div>
  );
}

export default App;