import { useState } from "react";
import type { ButtonProps } from "./Button";
import { Button } from "./Button";

export function ButtonInfiniteLoading({
  onClick,
  isLoading,
  loadingChildren,
  children,
  ...props
}: ButtonProps & { loadingChildren?: string }) {
  const [localIsLoading, setLocalIsLoading] = useState<boolean>(false);
  return (
    <Button
      isLoading={localIsLoading || isLoading}
      onClick={(e) => {
        setLocalIsLoading(true);
        onClick?.(e);
      }}
      {...props}
    >
      {localIsLoading ? (loadingChildren ?? children) : children}
    </Button>
  );
}