import React, { useEffect, useRef } from 'react';

interface ConfirmDeleteUserModalProps {
    userName: string;
    confirmDelete: () => void;
    closeModal: () => void;
}

const ConfirmDeleteUserModal: React.FC<ConfirmDeleteUserModalProps> = ({ userName, confirmDelete, closeModal }) => {
    const modalRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === 'Escape') {
                closeModal();
            }
        };

        const handleClickOutside = (e: MouseEvent) => {
            if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
                closeModal();
            }
        };

        document.addEventListener('keydown', handleKeyDown);
        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('keydown', handleKeyDown);
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [closeModal]);

    return (
        <div className="delete-user-modal">
            <div className="delete-user-content" ref={modalRef}>
                <h3>Are you sure?</h3>
                <p>Are you sure you want to delete user <strong>{userName}</strong>?</p>
                <div className="delete-user-actions">
                    <button className="btn btn-danger" onClick={confirmDelete}>
                        Yes
                    </button>
                    <button className="btn btn-secondary"  onClick={closeModal}>
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ConfirmDeleteUserModal;
