Action button

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { AlertCircle, Check } from "lucide-react";
import { cn } from "@/lib/utils";

type Status = "idle" | "pending" | "success" | "error";

export interface ActionButtonProps {
  /** Runs on click. Resolve for success, throw for error. */
  onAction: () => Promise<unknown>;
  children: React.ReactNode;
  pendingLabel?: React.ReactNode;
  successLabel?: React.ReactNode;
  errorLabel?: React.ReactNode;
  /** How long the success or error state stays before returning to idle. */
  resetAfter?: number;
  variant?: "primary" | "secondary";
  className?: string;
}

/** A button that morphs through pending, success and error instead of swapping in a toast. */
export function ActionButton({
  onAction,
  children,
  pendingLabel = "Saving",
  successLabel = "Saved",
  errorLabel = "Try again",
  resetAfter = 1800,
  variant = "primary",
  className,
}: ActionButtonProps) {
  const [status, setStatus] = React.useState<Status>("idle");
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  React.useEffect(() => () => {
    if (timer.current) clearTimeout(timer.current);
  }, []);

  const run = async () => {
    if (status === "pending") return;
    setStatus("pending");
    try {
      await onAction();
      setStatus("success");
    } catch {
      setStatus("error");
    }
    timer.current = setTimeout(() => setStatus("idle"), resetAfter);
  };

  const content: Record<Status, React.ReactNode> = {
    idle: children,
    pending: (
      <>
        <Spinner />
        {pendingLabel}
      </>
    ),
    success: (
      <>
        {successLabel}
        <Check />
      </>
    ),
    error: (
      <>
        <AlertCircle />
        {errorLabel}
      </>
    ),
  };

  return (
    <motion.button
      type="button"
      layout
      onClick={run}
      aria-busy={status === "pending" || undefined}
      aria-live="polite"
      style={{ borderRadius: 8 }}
      transition={{ layout: { type: "spring", bounce: 0.2, duration: 0.4 } }}
      whileTap={{ scale: 0.97 }}
      className={cn(
        "relative inline-flex h-11 items-center overflow-hidden px-5 text-sm font-medium outline-none",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        "[&_svg]:size-4 [&_svg]:shrink-0",
        variant === "primary" ? "bg-primary text-primary-foreground shadow-md" : "border border-input text-foreground",
        status === "error" && "bg-destructive text-white",
        className,
      )}
    >
      <AnimatePresence mode="popLayout" initial={false}>
        <motion.span
          key={status}
          layout="position"
          initial={{ opacity: 0, y: 12, filter: "blur(4px)" }}
          animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          exit={{ opacity: 0, y: -12, filter: "blur(4px)" }}
          transition={{ type: "spring", bounce: 0, duration: 0.3 }}
          className="flex items-center gap-2 whitespace-nowrap"
        >
          {content[status]}
        </motion.span>
      </AnimatePresence>
    </motion.button>
  );
}

function Spinner() {
  return (
    <svg viewBox="0 0 24 24" fill="none" className="animate-spin">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}