import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';

import { list, people } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';

// import Tab1 from './AppPages/Tab1';
// import Tab2 from './AppPages/Tab2';

import './style.scss';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';

function DemoPullstateTutorial() {
  return (
    <IonTabs className="demo-pullstate-tutorial">
      <IonRouterOutlet>
        <Route exact path="/demo-pullstate-tutorial/tab1">
          <Tab1 />
        </Route>
        <Route exact path="/demo-pullstate-tutorial/tab2">
          <Tab2 />
        </Route>

        <Redirect exact path="/demo-pullstate-tutorial" to="/demo-pullstate-tutorial/tab1" />
      </IonRouterOutlet>

      {/*  */}
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/demo-pullstate-tutorial/tab1">
          <IonIcon icon={list} />
          <IonLabel>List</IonLabel>
        </IonTabButton>
        <IonTabButton tab="tab2" href="/demo-pullstate-tutorial/tab2">
          <IonIcon icon={people} />
          <IonLabel>Following</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
}

export default DemoPullstateTutorial;