import { FC, Fragment, ReactNode, useEffect } from 'react'
import HeaderModal from './HeaderModal'

interface Props {
    open: boolean,
    close: () => void,
    children: ReactNode,
    isHeader?: boolean,
    title_header?: string,
    width?: number
}

const DefaulModal: FC<Props> = (props: Props) => {

    useEffect(() => {
        if (props.open) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = 'auto'
        }
    }, [props.open])


    return (
        <Fragment>
            {
                props.open && (
                    <Fragment>
                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden  overflow-y-auto fixed inset-0 z-[60]  h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
                            <div className='relative xl:h-full max-h-[80%] bottom-0 left-0  flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
                                <div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2  outline-none focus:outline-none max-h-[85%]'>


                                    {
                                        props.isHeader && props.title_header &&
                                        <div onClick={props.close} className='pb-6 border-b border-white border-opacity-20'>
                                            <div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
                                            <HeaderModal close={props.close} label={props.title_header} />
                                        </div>
                                    }

                                    {props.children}


                                </div>
                            </div>
                        </div>

                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-50 '></div>
                    </Fragment>
                )
            }
        </Fragment>
    )
}

export default DefaulModal