import React from 'react';
// import PropTypes from 'prop-types';
import { forwardRef } from 'react';
// @mui
import { useTheme } from '@mui/material/styles';
import { StyledPopup } from './styles';
import { Box,Grid, Typography } from '@mui/material';
import {RxCross1} from "react-icons/rx";

interface PopupModalProps{
    isOpen ?: boolean,
    onClose ?: () => void,
    sx?:any,
    children ?: React.ReactNode,
    id: string,
    header?: string
}


const Popup = forwardRef(({children,onClose, isOpen=false, sx,header, ...other}:PopupModalProps, ref) => {
    const theme = useTheme();
    const defaultStyles = {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        bgcolor: 'white',
        border: "none",
        borderRadius: "4px",
        boxSizing: "none",
        width: "60%",
        maxHeight: "75%",
        overflow: "auto"
    }
    const styles = (sx!==undefined && Object.keys(sx).length>0) ? sx : defaultStyles;
    return (
        <StyledPopup          
            onClose={onClose}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
            open={isOpen}
            {...other}
        > 
            <Box sx={{
                ...styles
            }}>
                {/* <Grid container pt={2} pl={2} pr={2} border="none" direction={"column"}>
                    <Grid item display={"flex"} justifyContent={"space-between"}>
                        <Typography variant="h5" fontWeight={500} sx={{color: "#495057"}}>{header}</Typography>
                        <RxCross1 onClick={onClose} cursor="pointer" style={{width: "20px", height: "20px"}} />
                    </Grid>
                </Grid> */}
              {children}
            </Box>            
        </StyledPopup>
    )
}) 

export default Popup