"use client";

import { useFormStatus } from "react-dom";

/**
 * Submit button for one status transition.
 *
 * The confirmation prompt is the one thing that genuinely cannot move to the
 * server, so it stays here and cancels the submit rather than gating it — which
 * means without JS the form still posts (and the transition still happens, just
 * unconfirmed). `useFormStatus` supplies the in-flight label, and it only reads
 * from a parent form, hence the split.
 */
export default function AdvanceStatusButton({ status }: { status: string }) {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      onClick={(e) => {
        if (!confirm(`Mark trip as ${status}?`)) e.preventDefault();
      }}
      disabled={pending}
      className="rounded-lg bg-[#CC1414] px-4 py-2 text-sm font-medium text-white hover:bg-[#a30f0f] disabled:opacity-60"
    >
      {pending ? "…" : `Mark ${status}`}
    </button>
  );
}