arbret/frontend/app/components/ConfirmationButton.tsx

import { buttonStyles } from "../styles/shared";

interface ConfirmationButtonProps {
  /** Whether confirmation mode is active */
  isConfirming: boolean;
  /** Callback when user confirms the action */
  onConfirm: () => void;
  /** Callback when user cancels the confirmation */
  onCancel: () => void;
  /** Callback when user clicks the initial action button (to enter confirmation mode) */
  onActionClick: () => void;
  /** Label for the initial action button */
  actionLabel: string;
  /** Label for the confirm button (default: "Confirm") */
  confirmLabel?: string;
  /** Label for the cancel button (default: "No") */
  cancelLabel?: string;
  /** Whether the action is in progress (shows "..." on confirm button) */
  isLoading?: boolean;
  /** Style variant for the confirm button */
  confirmVariant?: "danger" | "success" | "primary";
  /** Custom style for the action button */
  actionButtonStyle?: React.CSSProperties;
  /** Custom style for the confirm button */
  confirmButtonStyle?: React.CSSProperties;
}

/**
 * Confirmation button component that shows a two-step confirmation flow.
 * Initially shows an action button. When clicked, shows Confirm/Cancel buttons.
 */
export function ConfirmationButton({
  isConfirming,
  onConfirm,
  onCancel,
  onActionClick,
  actionLabel,
  confirmLabel = "Confirm",
  cancelLabel = "No",
  isLoading = false,
  confirmVariant = "primary",
  actionButtonStyle,
  confirmButtonStyle,
}: ConfirmationButtonProps) {
  if (isConfirming) {
    let confirmStyle: React.CSSProperties = buttonStyles.primaryButton;
    if (confirmVariant === "danger") {
      confirmStyle = {
        ...buttonStyles.primaryButton,
        background: "rgba(239, 68, 68, 0.9)",
        borderColor: "rgba(239, 68, 68, 1)",
      };
    } else if (confirmVariant === "success") {
      confirmStyle = {
        ...buttonStyles.primaryButton,
        background: "rgba(34, 197, 94, 0.9)",
        borderColor: "rgba(34, 197, 94, 1)",
      };
    }

    return (
      <>
        <button
          onClick={(e) => {
            e.stopPropagation();
            onConfirm();
          }}
          disabled={isLoading}
          style={{ ...confirmStyle, ...confirmButtonStyle }}
        >
          {isLoading ? "..." : confirmLabel}
        </button>
        <button
          onClick={(e) => {
            e.stopPropagation();
            onCancel();
          }}
          style={buttonStyles.secondaryButton}
        >
          {cancelLabel}
        </button>
      </>
    );
  }

  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        onActionClick();
      }}
      style={actionButtonStyle || buttonStyles.secondaryButton}
    >
      {actionLabel}
    </button>
  );
}