import type { ReactNode } from "react";
import { useFormState } from "react-hook-form";

interface SubmitButtonProps {
  children: ReactNode;
  /** Replaces the label while the form is submitting (e.g. "Saving…"). */
  pendingLabel?: ReactNode;
  disabled?: boolean;
  className?: string;
  /** For an icon-only button (e.g. "✓"), its accessible name. */
  "aria-label"?: string;
}

/**
 * Submit button that reflects react-hook-form's `isSubmitting` from the
 * surrounding `FormProvider`: it disables itself while submitting and swaps in
 * `pendingLabel`. Standardizes the hand-rolled "Save → Saving…" pattern.
 */
export function SubmitButton({
  children,
  pendingLabel,
  disabled,
  className = "btn-primary",
  "aria-label": ariaLabel,
}: SubmitButtonProps) {
  const { isSubmitting } = useFormState();

  return (
    <button
      type="submit"
      className={className}
      disabled={isSubmitting || disabled}
      aria-label={ariaLabel}
    >
      {isSubmitting && pendingLabel != null ? pendingLabel : children}
    </button>
  );
}