import React from "react";
import { Loader } from "lucide-react";
import { useFormContext } from "react-hook-form";
import { Button, ButtonProps } from "@/components/ui/button";

type FormSubmitProps = Omit<ButtonProps, "type" | "disabled">;

export const FormSubmit: React.FC<FormSubmitProps> = (props) => {
    const {
        children,
        ...rest
    } = props;

    const {
        formState: {
            isSubmitting,
            isDirty
        }
    } = useFormContext();

    return (
        <Button
          {...rest}
          disabled={isSubmitting || !isDirty}>
            {isSubmitting && (
                <Loader
                  className="mr-2 size-4 animate-spin"
                  aria-hidden="true" />
            )}

            {children}
        </Button>
    );
};