import React, { Component } from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import './App.css';
import Home from './Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ClientList from './ClientList';
import InvoiceList from './InvoiceList';
import ClientEdit from "./ClientEdit";

class App extends Component {
  render() {
    return (
    <Container maxWidth="sm">
          <Box sx={{ my: 4 }}>
            <Typography variant="h4" component="h1" gutterBottom>
              Invoicer App
            </Typography>
            <Router>
              <Switch>
                <Route path='/' exact={true} component={Home}/>
                <Route path='/invoices' exact={true} component={InvoiceList}/>
                <Route path='/clients' exact={true} component={ClientList}/>
                <Route path='/clients/:id' component={ClientEdit}/>
              </Switch>
            </Router>
            </Box>
        </Container>
    )
  }
}

export default App;