import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';
import YoutubeVideos from './YoutubeVideos';
import VideoPage from './VideoPage';
import Contact from './Contact';
import Sidebar from './Sidebar';

function App() {
  // Video data - shared between components
  const videos = [
    { id: 'iYck6cHU1cg', title: 'Episode 1' },
    { id: 'd4MP13YitRM', title: 'Episode 2' },
    { id: 'vyGcF47Gjjc', title: 'Episode 3' },
    { id: 'iYnhK_jq5Xc', title: 'Episode 4' },
    { id: 'z0LS5XoaI3c', title: 'Episode 5' },
    { id: 'WoIQcxwp0fY', title: 'Episode 6' },
    { id: 'rqoGakIUF2g', title: 'Episode 7' },
    { id: 'iSEMcHMXtnI', title: 'Episode 8' },
    { id: 'JFFvob7Wr7o', title: 'Episode 9' },
    { id: 'l8w2nOlLLyw', title: 'Episode 10' },
    { id: '1hHWrlgVsXk', title: 'Episode 11' },
    { id: 't7O4ybTJlpo', title: 'Episode 12' },
    { id: 'zj8XGSa0zA0', title: 'Episode 13' }
  ];

  return (
    <Router>
      <div className='App'>
        <header className='App-header'>
          <Routes>
            <Route
              path='/'
              element={
                <>
                  <YoutubeVideos />
                  <Sidebar />
                </>
              }
            />
            <Route path='/contact' element={<Contact />} />
            <Route path='/watch/:videoId' element={<VideoPage videos={videos} />} />
          </Routes>
        </header>
      </div>
    </Router>
  );
}

export default App;