"use client";
import { useIsMutating } from "@tanstack/react-query";
import { useRouter } from "next/navigation";

interface IProps {
  onCancel?: () => void;
}

const FormFooter = ({ onCancel }: IProps) => {
  const isMutating = useIsMutating();
  const router = useRouter();
  return (
    <div className="col-span-2 flex gap-6">
      <button
        type="submit"
        className="mt-6 flex w-fit items-center justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
      >
        {isMutating ? (
          <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
        ) : (
          "Submit"
        )}
      </button>
      <button
        type="button"
        onClick={onCancel ?? router.back}
        className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
      >
        Opt out
      </button>
    </div>
  );
};

export default FormFooter;