import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { GlobalStyle } from './style/Global'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { darkTheme } from './style/theme'
import { ErrorPage } from './pages/errorPage/ErrorPage'
import { Home } from './pages/home/Home'
import { BikeSharingMap } from "./pages/map/BikeSharingMap"
import { BikePointDetails } from './pages/bikePointDetails/BikePointDetails'

const App = () => {

    return (
        <ThemeProvider theme={darkTheme}>
            <GlobalStyle/>
            <Router>
                <SiteWrapper>
                    <Switch>
                        <Route path='/' exact component={Home}/>
                        <Route path='/map' exact component={BikeSharingMap}/>
                        <Route path='/bike-point-details/:bikePointId' exact component={BikePointDetails}/>
                        <Route component={ErrorPage}/>
                    </Switch>
                </SiteWrapper>
            </Router>
        </ThemeProvider>
    )
}

const SiteWrapper = styled.div`
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
`

export default App