/**
 * @Move (SQDP)
 * Only used by the Acknowledgements module - move to Acknowledgements/
 */
import { FC, PropsWithChildren, ReactElement } from 'react';

import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

type AuthGuardProps = {
  breakpoint: string;
  down?: true;
  up?: true;
};

const Hidden: FC<PropsWithChildren<AuthGuardProps>> = ({
  children,
  down,
  up,
  breakpoint,
}) => {
  const theme = useTheme();
  let comparator;
  if (down) comparator = theme.breakpoints.down;
  if (up) comparator = theme.breakpoints.up;
  const shouldHide = useMediaQuery(comparator(breakpoint));

  return shouldHide ? null : (children as ReactElement);
};

export default Hidden;