import React, { FC } from 'react';
import Container from '@material-ui/core/Container';
import { Route, useRouteMatch } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { Driver } from 'roles/Driver';
import { HomePage } from './HomePage/HomePage';
import { ProfilePage } from './ProfilePage/ProfilePage';
import { ReservationPage } from './ReservationPage/ReservationPage';
import { VeiclePage } from './VehiclePage/VehiclePage';
import { DriverShiftPage } from './DriverShift/DriverShiftPage';

export const Dashboard: FC = () => {
  const { path } = useRouteMatch();
  return (
    <>
      <Route exact path={`${path}${AuthRoutes.home}`} component={HomePage} />
      <Route path={`${path}${AuthRoutes.profile}`} component={ProfilePage} />
      <Route
        path={`${path}${AuthRoutes.reservation}`}
        component={ReservationPage}
      />
      <Route
        path={`${path}${AuthRoutes.driver}`}
        component={Driver(DriverShiftPage)}
      />
    </>
  );
};