import React from 'react';
import './modal.css';
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    show: boolean,
    header?:string,
    fullWidth?: boolean,
    size? : 'small' | 'medium' | 'large'
    children: React.ReactNode,
    buttonAlign?: 'center' | 'right',
    handleClose: () => void;
}

const Modal = (props: Props) => {
    const {show,header, children,fullWidth,size,buttonAlign, handleClose} = props;
    const showHideClassName = show ? 'modal-show' : ''
    const footerBUttonAlign = buttonAlign === 'center' ? 'align-center' : ''
    return (
        <div className={`modal ${showHideClassName}`}>
            <div className={`modal-dialog ${fullWidth ? 'modal-fullscreen' : 'modal-centered'} ${size ? `modal-size-${size}` : ''}`}>
                <div className='modal-content'>
                    {/* Modal Header */}
                    <div className='modal-header'>
                        {header && <h6>{header}</h6>}
                        <button onClick={handleClose}><Iconsvg name='close'/></button>
                    </div>
                    {/* Modal body */}
                    <div className='modal-body'>
                        {children}
                    </div>
                    {/* Modal footer */}
                    <div className={`modal-footer ${footerBUttonAlign}`}>
                        <button className='close-btn' onClick={handleClose}>Close</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Modal;