import { Button } from "../button";
import { useFormStatus } from "./form";
/**
 * A submit button that automatically shows a loading state when the parent form is submitting.
 *
 * @remarks
 * This component uses {@link useFormStatus} to detect the pending state of the form.
 * It passes the `loading` prop to the underlying {@link Button} component.
 *
 * @param props - Props for the Button component.
 * @returns A Button component configured for form submission.
 *
 * @example
 * ```tsx
 * <Form schema={schema} onSubmit={handleSubmit}>
 *     <SubmitButton>Save Changes</SubmitButton>
 * </Form >
 * ```
 */
export function SubmitButton(props) {
    let { isPending } = useFormStatus();
    return <Button {...props} loading={isPending}/>;
}