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

import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';

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

import Home from './pages/Home.jsx';
import Account from './pages/Account';
import AddCard from './pages/AddCard';
import AddTransaction from './pages/AddTransaction';

import './style.scss';

function DemoBankingUi() {
  return (
    <IonTabs className="demo-banking-ui">
      <IonRouterOutlet>
        <Route path="/demo-banking-ui/home" exact={true}>
          <Home />
        </Route>

        <Route path="/demo-banking-ui/account" exact={true}>
          <Account />
        </Route>

        <Route path="/demo-banking-ui/account/add-card" exact={true}>
          <AddCard />
        </Route>

        <Route path="/demo-banking-ui/add-transaction/:card_id" exact={true}>
          <AddTransaction />
        </Route>

        <Redirect exact path="/demo-banking-ui" to="/demo-banking-ui/home" />
      </IonRouterOutlet>
    </IonTabs>
  );
}

export default DemoBankingUi;