import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import styles from "./styles.module.scss";
import {APP_THEME} from "@constants/app";
import logo_dark from "@assets/logo/logo.png";
import logo_light from "@assets/logo/logo_w.png";
import React from "react";
import {useThemeProvider} from "@contexts/themeContext";
const i18n=global.i18n;


const WMaintainBox = ({ open=false,content="" }) => {
    const {theme,isMobile} = useThemeProvider();
    const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
    // if (content==="")content=i18n.t('maintain.content');
    if (content==="")content='Para fornecer um serviço melhor, faremos a manutenção do sistema das 1:00 às 3:00 em 29 de agosto. O site não estará acessível durante esse período. Por favor, seja paciente.';
    const renderLogo=()=>{
        return (
            <div className={styles.l_logo}>
                <img className={styles.logo_img} src={logourl}/>
            </div>
        )
    }
    const renderContent=()=>{
        return (
            <div className={styles.content}>{content}</div>
        )
    }
    const renderBtn=()=>{
        return (
            <button className={"button-green"}>
                {i18n.t('maintain.confirm')}
            </button>
        )
    }
    return (
        <Modal open={open} onClose={() => {

        }} closeAfterTransition>
            <Fade in={open} timeout={500}>
                <div className="popup-container">
                <Grow in={open} timeout={500}>
                        <div className={`popup card card-padded ${styles.container}`}>
                            {renderLogo()}
                            {renderContent()}
                            {renderBtn()}
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WMaintainBox;