import { ReactNode } from 'react';
import { IoMdClose } from 'react-icons/io';

interface ModalProps {
    title: string;
    subTitle?: string;
    children: ReactNode;
    isOpen?: boolean;
    onClose: () => void;
}

const Modal = ({ title, children, isOpen, onClose, subTitle }: ModalProps) => {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
            <div className="bg-white rounded-[30px] shadow-lg max-w-lg w-full p-8 mx-4">
                <div className="flex justify-center flex-row items-center">
                    <div className='relative flex justify-center items-center flex-col'>
                        <h2 className="text-xl font-semibold text-[--primary] text-center">{title}</h2>

                        {!!subTitle &&
                            <p className="text-center text-xs text-[--text-color]">{subTitle}</p>
                        }
                    </div>

                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600 focus:outline-none items-start mb-14"
                    >
                        <IoMdClose fontSize={20} />
                    </button>
                </div>
                <div>{children}</div>
            </div>
        </div>
    );
};

export default Modal;