import React from 'react';
import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo';
import './App.css';

class App extends React.Component {
	render() {
		return (
			<React.Fragment>
				<TopBar />
				<Row className="justify-content-center bg-black">
					<Col xs="12" sm="6">
						<Switch>
							<Route path="/video/:id" component={VideoPlayer} />
							<Route component={VideoPlayer} />
							{/* <Route path='/search/:q/:token?' component={Search} />  */}
						</Switch>
					</Col>
				</Row>
				<Row>
					<Switch>				
					<Route path="/video/:id" component={VideoInfo} />
					<Route exact path='/' component={VideoList} />
					</Switch>
				</Row>
			</React.Fragment>
		);
	}
}

export default App;