import { Button, ButtonProps, CircularProgress } from "@mui/material";
 
interface ILoadingButtonProps extends ButtonProps {
  loading?: boolean;
  loadingLabel?: React.ReactNode;
  children: React.ReactNode;
}
 
const LoadingButton = ({
  loading = false,
  loadingLabel = "Loading...",
  children,
  ...rest
}: ILoadingButtonProps) => {
  return (
    <Button
      {...rest}
      disabled={loading || rest.disabled}
      endIcon={loading ? null : rest.endIcon}
      startIcon={loading ? null : rest.startIcon}
    >
      {loading ? (
        <div className="flex gap-2 items-center">
          <CircularProgress size={16} color="inherit" />
          <div>{loadingLabel}</div>
        </div>
      ) : (
        children
      )}
    </Button>
  );
};
 
export default LoadingButton;