import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';
import {Search} from './components/Search';
import SearchBar from "./components/SearchBar";

import './styles/reset.css';
import './styles/main.css';

import {Nav} from "./components/Nav";

import {BrowserRouter, Switch, Route} from "react-router-dom";

const Main = (props) => (
    <Fragment>
        <h1>Busca la musica que te gusta!</h1>
        <SearchBar history={props.history}/>
    </Fragment>
)

const NoRoute = (props) => {
    return (
        <div>
            <h1>Esa pagina no existe</h1>
            <button className='link' onClick={() => props.history.goBack()}>Volver</button>
        </div>
    );
}

const App = () => (
    <main>
        <BrowserRouter>
            <Nav/>
            <Switch>
                <Route path='/search/:who?' component={Search}/>
                <Route exact path='/' component={Main}/>
                <Route path='*' component={NoRoute}/>
            </Switch>
        </BrowserRouter>
    </main>
);

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);