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

type SubmitButtonProps = {
	children: React.ReactNode;
	variant?: "default" | "secondary" | "destructive";
	className?: string;
};

export const SubmitButton = ({
	children,
	variant = "default",
	className,
}: SubmitButtonProps) => {
	const form = useFormContext();

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

	return (
		<div className="">
			<Button
				type="submit"
				disabled={isSubmitting}
				variant={variant}
				className={className}
			>
				{isSubmitting ? (
					<>
						<Spinner data-icon="inline-start" /> Submitting{" "}
					</>
				) : (
					<>{children}</>
				)}
			</Button>
		</div>
	);
};
