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

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

import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import { useMicroloansNavState } from '../hooks/useMicroloansNavState';

const MicroloansIndexRedirect = () => {
  const { entryPath, isReady } = useMicroloansNavState();

  if (!isReady) {
    return (
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          minHeight: 200,
        }}
      >
        <HuSpinner size="medium" />
      </Stack>
    );
  }

  return (
    <Navigate
      to={entryPath}
      replace
    />
  );
};

export default MicroloansIndexRedirect;
