import { IonRouterOutlet, IonTabs } from '@ionic/react';

import { Route, Redirect } from 'react-router';

import Page from './pages/Page';
import Page2 from './pages/Page2';

function DemoReactLifecycles() {
  return (
    <IonTabs>
      <IonRouterOutlet>
        {/*
        <Route exact path="/demo-react-lifecycles/tab1">
          <Tab1 />
        </Route>
        <Route exact path="/demo-react-lifecycles/tab2">
          <Tab2 />
        </Route>
        */}

        <Route path="/demo-react-lifecycles/page/:name" exact={true}>
          <Page />
        </Route>

        <Route path="/demo-react-lifecycles/page2" exact={true}>
          <Page2 />
        </Route>

        <Redirect exact path="/demo-react-lifecycles" to="/demo-react-lifecycles/page/Inbox" />
      </IonRouterOutlet>

      {/*
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/demo-react-lifecycles/tab1">
          <IonIcon icon={cloudOutline} />
          <IonLabel>Dashboard</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab2" href="/demo-react-lifecycles/tab2">
          <IonIcon icon={searchOutline} />
          <IonLabel>Search</IonLabel>
        </IonTabButton>
      </IonTabBar>
      */}
    </IonTabs>
  );
}

export default DemoReactLifecycles;