import React from 'react';
import Modal from './Modal';

const SupportModalWrapper = ({ isOpen, onClose, children, title }) => {
    return (
        <Modal isOpen={isOpen} onClose={onClose}>
            <div className="arcm-bg-white arcm-rounded-[10px] arcm-w-[460px] arcm-max-w-[460px] arcm-min-h-[290px]">
                <div className="arcm-flex arcm-justify-between arcm-items-center arcm-px-7 arcm-pt-[25px] arcm-pb-[10px]">
                    <h4 className="arcm-text-gray-800 arcm-text-lg arcm-font-bold">{title}</h4>
                    <button className="arcm-relative arcm-z-10 arcm-ml-auto" onClick={onClose}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
                            <path d="M8.5 8.5L16 16M1 16L8.5 8.5L1 16ZM16 1L8.49857 8.5L16 1ZM8.49857 8.5L1 1L8.49857 8.5Z" 
                                  stroke="#575757" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                    </button>
                </div>
                <div className="arcm-px-[30px] arcm-pt-5 arcm-pb-3">
                    {children}
                </div>
            </div>
        </Modal>
    );
};

export default SupportModalWrapper;