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

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

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

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

import './style.scss';
import React from 'react';

function DemoBankingUi(): React.JSX.Element {
  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;