"use client";

import { useFormStatus } from "react-dom";

/**
 * Split out only so `useFormStatus` has an enclosing form to read — it works
 * nowhere else. The form posts to the server action with or without this JS;
 * all this adds is the "Saving…" label the old `saving` flag provided.
 */
export default function SaveButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="rounded-lg bg-[#CC1414] px-4 py-2 text-sm font-medium text-white hover:bg-[#a51010] disabled:opacity-50"
    >
      {pending ? "Saving…" : "Save changes"}
    </button>
  );
}