import CircularProgress, {
  CircularProgressProps,
} from '@material-hu/mui/CircularProgress';
import Stack from '@material-hu/mui/Stack';

type Props = CircularProgressProps & {
  centered?: boolean;
};

/**
 * @deprecated Use `Spinner` from `@material-hu/components/design-system/ProgressIndicators/Spinner` instead.
 * Note: `Spinner` defaults `centered` to `true`.
 */
const CenteredCircularProgress = ({ centered = false, ...props }: Props) => {
  const circularProgress = <CircularProgress {...props} />;

  return centered ? (
    <Stack
      direction="row"
      sx={{ justifyContent: 'center', alignItems: 'center' }}
    >
      {circularProgress}
    </Stack>
  ) : (
    circularProgress
  );
};

export default CenteredCircularProgress;