import { Box } from "@mui/material";
import { Grid } from "../components/grid/Grid";
import { useLocation } from "react-router-dom";
import {
  ROUTE_ADMINX_DASHBOARD,
  ROUTE_PROVINCE_DASHBOARD,
  ROUTE_PROVINCE_SUPERVISOR_DASHBOARD,
  ROUTE_SUPER_ADMIN_DASHBOARD,
} from "../routes/routes";
import { DashboardTab } from "../features/dashboard/components/dashboard-tab/DashboardTab";
import { BackButton } from "../components/back-button/BackButton";

const DashboardPage = () => {
  const { pathname } = useLocation();

  return (
    <Box display="flex" justifyContent="center" pb={20}>
      <Grid container xs={12} sm={12} md={10} lg={10}>
        <BackButton />
        {(pathname.includes(ROUTE_ADMINX_DASHBOARD) ||
          pathname.includes(ROUTE_SUPER_ADMIN_DASHBOARD) ||
          pathname.includes(ROUTE_PROVINCE_DASHBOARD) ||
          pathname.includes(ROUTE_PROVINCE_SUPERVISOR_DASHBOARD)) && (
          <DashboardTab />
        )}
      </Grid>
    </Box>
  );
};

export default DashboardPage;