"use client";
import { Button } from "@/components/ui-elements/button";
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-1 flex gap-6 md:col-span-2">
      <Button
        label={
          isMutating ? (
            <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-1"></div>
          ) : (
            "Submit"
          )
        }
        variant="primary"
        shape="rounded"
        size="small"
        type="submit"
        data-cy="admin-form-submit-button"
        disabled={isMutating > 0}
        className="mt-6 w-fit rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
      />
      <Button
        label="Opt out"
        shape="rounded"
        size="small"
        type="button"
        data-cy="admin-form-cancel-button"
        variant="error"
        onClick={onCancel ?? router.back}
        className="mt-6 w-fit rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
      />
    </div>
  );
};

export default FormFooter;
