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

import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';

import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

import './theme/style.scss';
import './theme/floating-tab-bar.scss';

function DemoFloatingTabs() {
  return (
    <IonTabs className="demo-floating-tabs">
      <IonRouterOutlet>
        <Route exact path="/demo-floating-tabs/tab1">
          <Tab1 />
        </Route>
        <Route exact path="/demo-floating-tabs/tab2">
          <Tab2 />
        </Route>
        <Route path="/demo-floating-tabs/tab3">
          <Tab3 />
        </Route>
        <Redirect exact path="/demo-floating-tabs" to="/demo-floating-tabs/tab1" />
      </IonRouterOutlet>

      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
          <IonIcon icon={homeOutline} />
        </IonTabButton>

        <IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
          <IonIcon icon={listOutline} />
        </IonTabButton>

        <IonTabButton tab="tab3" href="/demo-floating-tabs/tab3">
          <IonIcon icon={cogOutline} />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
}

export default DemoFloatingTabs;