Loading Button

"use client";

import { useState, type ReactNode } from "react";
import { Check, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface LoadingButtonProps {
  children?: ReactNode;
  /** Label shown while running. */
  loadingLabel?: string;
  /** Label shown briefly after success. */
  successLabel?: string;
  /** Async action; the button shows a spinner until it resolves. */
  onAction?: () => Promise<void>;
  variant?: "primary" | "secondary";
  className?: string;
}

const wait = (ms: number) => new Promise<void>((r) => setTimeout(r, ms));

/** Async action button: idle → spinner + “Processing…” (aria-busy, width locked) → green check “Sent” for 2s → idle. Default simulates a 1.4s payment run. */
export function LoadingButton({
  children = "Send payment run",
  loadingLabel = "Processing…",
  successLabel = "Sent",
  onAction = () => wait(1400),
  variant = "primary",
  className,
}: LoadingButtonProps) {
  const [state, setState] = useState<"idle" | "loading" | "done">("idle");
  const run = async () => {
    if (state !== "idle") return;
    setState("loading");
    try {
      await onAction();
      setState("done");
      await wait(2000);
    } finally {
      setState("idle");
    }
  };
  return (
    <button
      type="button"
      onClick={run}
      aria-busy={state === "loading"}
      aria-disabled={state !== "idle"}
      className={cn(
        "da-focus da-transition inline-flex h-10 min-w-40 items-center justify-center gap-2 rounded-da-md px-4 text-sm font-semibold",
        state === "done"
          ? "bg-da-success text-da-success-fg"
          : variant === "primary"
            ? "bg-da-primary text-da-primary-fg hover:bg-da-primary/90"
            : "da-stroke bg-da-surface text-da-surface-fg hover:bg-da-surface-2",
        state === "loading" && "cursor-progress opacity-90",
        className,
      )}
    >
      {state === "loading" && <Loader2 aria-hidden className="size-4 animate-spin motion-reduce:animate-none" />}
      {state === "done" && <Check aria-hidden className="size-4" strokeWidth={3} />}
      <span aria-live="polite">{state === "loading" ? loadingLabel : state === "done" ? successLabel : children}</span>
    </button>
  );
}

export default LoadingButton;