import {
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonSplitPane,
  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 './style.scss';
import './theme/variables.scss';
import Menu from './components/Menu';
import Add from './pages/Add';
import Kanban from './pages/Kanban';

function DemoKanbanBoard() {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/demo-kanban-board/page/kanban" exact={true}>
              <Kanban />
            </Route>

            <Route path="/demo-kanban-board/page/add/:category_id">
              <Add />
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>

        <Redirect exact path="/demo-kanban-board" to="/demo-kanban-board/page/kanban" />
      </IonRouterOutlet>
    </IonTabs>
  );
}

export default DemoKanbanBoard;