/**
 * @file Reusable confirmation modal component for destructive operations.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import type { JSX } from "react";

interface ConfirmationModalProperties {
  readonly title:        string;
  readonly description:  string;
  readonly confirmLabel: string;
  readonly onConfirm:    ()=> void;
  readonly onCancel:     ()=> void;
  readonly isLoading:    boolean;
}

/**
 * Renders a confirmation modal for destructive operations.
 * @param props - The modal properties.
 * @param props.title - The modal heading.
 * @param props.description - Warning text explaining what the operation does.
 * @param props.confirmLabel - Label for the confirm button.
 * @param props.onConfirm - Callback fired when the player confirms.
 * @param props.onCancel - Callback fired when the player cancels.
 * @param props.isLoading - Whether the operation is currently in progress.
 * @returns The JSX element.
 */
const ConfirmationModal = ({
  title,
  description,
  confirmLabel,
  onConfirm,
  onCancel,
  isLoading,
}: ConfirmationModalProperties): JSX.Element => {
  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>{title}</h2>
        <p>{description}</p>
        <p className="modal-note">{"Are you sure you want to do this?"}</p>
        <div className="modal-actions">
          <button
            className="modal-close-button modal-button-danger"
            disabled={isLoading}
            onClick={onConfirm}
            type="button"
          >
            {isLoading
              ? "Working..."
              : confirmLabel}
          </button>
          <button
            className="modal-close-button"
            disabled={isLoading}
            onClick={onCancel}
            type="button"
          >
            {"Cancel"}
          </button>
        </div>
      </div>
    </div>
  );
};

export { ConfirmationModal };