"use client";

import { useFormStatus } from "react-dom";

type SubmitButtonProps = {
  label: string;
  pendingLabel: string;
  className?: string;
  disabled?: boolean;
};

export function SubmitButton({
  label,
  pendingLabel,
  className,
  disabled = false,
}: SubmitButtonProps) {
  const { pending } = useFormStatus();
  const interactiveClassName = `cursor-pointer disabled:cursor-not-allowed ${
    className ?? ""
  }`.trim();

  return (
    <button
      type="submit"
      disabled={pending || disabled}
      className={interactiveClassName}
    >
      {pending ? pendingLabel : label}
    </button>
  );
}