import React from 'react';

interface ModalProps {
    id: string;
    title: string;
    content: string;
    onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({ id, title, content, onClose }) => {
    return (
        <div className="modal fade modal-bottom-center" id={id} tabIndex={-1}>
            <div className="modal-dialog modal-xl">
                <div className="modal-content">
                    <div className="modal-body p-6">
                        <div className="row">
                            <div className="col-md-12 col-lg-8 mb-4 mb-lg-0 my-auto align-items-center">
                                <h4 className="mb-2">{title}</h4>
                                <p className="mb-0">{content}</p>
                            </div>
                            <div className="col-md-5 col-lg-4 text-lg-end my-auto">
                                <button
                                    className="btn btn-primary rounded-pill"
                                    data-bs-dismiss="modal"
                                    aria-label="Close"
                                    onClick={onClose}
                                >
                                    I Understand
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Modal;