import { type ReactNode } from 'react';
import { Navigate } from 'react-router-dom';

import CircularProgress from '@material-hu/mui/CircularProgress';
import Stack from '@material-hu/mui/Stack';

import { useTimeTrackingAccess } from 'src/hooks/useTimeTrackingAccess';

export type Props = {
  children: ReactNode;
};

const TimeTrackingModuleGuard = ({ children }: Props) => {
  const { canAccessTimeTrackingModule, isLoading } = useTimeTrackingAccess();

  if (isLoading) {
    return (
      <Stack
        sx={{
          alignItems: 'center',
          height: '100%',
          justifyContent: 'center',
        }}
      >
        <CircularProgress />
      </Stack>
    );
  }

  if (!canAccessTimeTrackingModule) {
    return <Navigate to="/" />;
  }

  return <>{children}</>;
};

export default TimeTrackingModuleGuard;