import { type FC, Fragment, type 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>
                        {/* Backdrop */}
                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 bg-black/50 backdrop-blur-md inset-0 z-50'></div>

                        {/* Modal Container */}
                        <div className='fixed inset-0 z-[60] flex xl:justify-center xl:items-start items-end overflow-x-hidden overflow-y-auto'>
                            <div style={{ maxWidth: props.width }} className='relative xl:max-h-[90vh] xl:my-6 xl:max-w-xl mx-auto w-full xl:w-auto'>
                                <div className='border-0 xl:h-auto max-h-[80vh] p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
                                    {
                                        props.isHeader && props.title_header &&
                                        <div className='pb-3 border-b border-border'>
                                            <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>
                    </Fragment>
                )
            }
        </Fragment>
    )
}

export default DefaulModal