"use client";

import { useFormStatus } from "react-dom";
import { markAllNotificationsRead } from "./actions";

/**
 * `useFormStatus` reports the status of the *enclosing* form, so this button
 * greys out while any of the notification actions is in flight — which is what
 * the old shared `busy` flag did across all three header buttons.
 *
 * `formAction` overrides the form's own action, letting several mutations share
 * one form; that is what keeps the row checkboxes and these buttons together
 * without nesting forms, which HTML forbids.
 */
export default function MarkAllReadButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      formAction={markAllNotificationsRead}
      disabled={pending}
      className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
    >
      Mark all read
    </button>
  );
}