import React, { useEffect } from 'react';

interface SuccessModalProps {
  show: boolean;
  onClose: () => void;
  title?: string;
  message: string;
}

const SuccessModal: React.FC<SuccessModalProps> = ({
  show,
  onClose,
  title = "Success!",
  message
}) => {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    if (show) {
      document.addEventListener('keydown', handleKeyDown);
    }
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [show, onClose]);

  if (!show) return null;

  return (
    <div
      className="modal d-block"
      tabIndex={-1}
      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header border-0 pb-0">
            <div className="w-100 text-center">
              <div 
                className="mx-auto mb-3 d-flex align-items-center justify-content-center bg-success rounded-circle"
                style={{ width: '60px', height: '60px' }}
              >
                <i className="bi bi-check-lg text-white" style={{ fontSize: '2rem' }}></i>
              </div>
              <h5 className="modal-title">{title}</h5>
            </div>
            <button 
              type="button" 
              className="btn-close" 
              onClick={onClose}
            ></button>
          </div>
          <div className="modal-body text-center pt-0">
            <p className="mb-4">{message}</p>
          </div>
          <div className="modal-footer border-0 pt-0 justify-content-center">
            <button 
              type="button" 
              className="btn btn-primary px-4"
              onClick={onClose}
            >
              OK
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SuccessModal;