import { useStore } from "@tanstack/react-form";
import { useFormContext } from "..";
import { Button } from "../../../components/ui/button";

type SubmitButtonProps = {
    children: React.ReactNode;
};

export const SubmitButton = ({ children }: SubmitButtonProps) => {
    const form = useFormContext();

    const [isSubmitting] = useStore(form.store, (state) => [
        state.isSubmitting,
        state.canSubmit,
    ]);

    return (
        <div className="">
            <Button type="submit" disabled={isSubmitting}>
                {children}
            </Button>
        </div>
    );
};
