import React from 'react';
import { Modal, Button } from 'react-bootstrap';
import { FaTimes } from 'react-icons/fa';

/**
 * A reusable confirmation modal component
 * @param {Object} props - Component props
 * @param {boolean} props.show - Controls modal visibility
 * @param {Function} props.onHide - Function to call when modal is closed
 * @param {Function} props.onConfirm - Function to call when action is confirmed
 * @param {string} props.title - Modal title
 * @param {string} props.message - Confirmation message
 * @param {string} props.confirmLabel - Label for the confirm button
 * @param {string} props.cancelLabel - Label for the cancel button
 * @param {string} props.variant - Bootstrap color variant for the confirm button
 */
const ConfirmModal = ({
  show,
  onHide,
  onConfirm,
  title = "Confirm Action",
  message = "Are you sure you want to proceed?",
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  variant = "danger"
}) => {
  return (
    <Modal show={show} onHide={onHide} centered>
      <Modal.Header>
        <Modal.Title style={{ color: "#0E6591" }}>
          {title}
        </Modal.Title>
        <div
          onClick={onHide}
          style={{
            cursor: "pointer",
            color: "#0E6591",
            fontSize: "1.5rem",
            position: "absolute",
            right: "15px",
            top: "15px",
          }}
          aria-label="Close"
        >
          <FaTimes />
        </div>
      </Modal.Header>
      <Modal.Body>
        <p>{message}</p>
      </Modal.Body>
      <Modal.Footer className="justify-content-between">
        <Button
          variant="outline-secondary"
          onClick={onHide}
          className="px-4"
        >
          {cancelLabel}
        </Button>
        <Button
          variant={variant}
          onClick={() => {
            onConfirm();
            onHide();
          }}
          className="px-4"
        >
          {confirmLabel}
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmModal; 