import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
import { Redirect, Route } from 'react-router-dom';
import { IonReactRouter } from '@ionic/react-router';
import HomePage from './pages/HomePage';
import ListBiographies from './pages/ListBiographies';
import Biography from './pages/Biography';
import ListCapsules from './pages/ListCapsules';
import Capsule from './pages/Capsule';
import Questions from './pages/Questions';
import AboutUs from './pages/AboutUs';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

//<IonNav root={() => <HomePage />}></IonNav>

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" exact={true}>
          <Redirect to="/home" />
        </Route>
        <Route path="/home" exact={true}>
          <HomePage />
        </Route>
        <Route path="/ListBiographie">
          <ListBiographies />
        </Route>
        <Route path="/Biographie/:id">
          <Biography />
        </Route>
        <Route path="/ListCapsules">
          <ListCapsules />
        </Route>
        <Route path="/Capsule">
          <Capsule />
        </Route>
        <Route path="/Question/:id">
          <Questions />
        </Route>
        <Route path="/About">
          <AboutUs />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;