"use client";
import { Mask } from "antd-mobile";
import { forwardRef, PropsWithChildren, ReactNode, useImperativeHandle, useState } from "react";

type Props = {
    title?: string | ReactNode;
    onBeforeClose?: () => void;
};
export type ModalProps = {
    onClose: () => void;
    onOpen: () => void;
};
const TipsModal = forwardRef<ModalProps, PropsWithChildren<Props>>(function TipsModal(props, ref) {
    const { children, title, onBeforeClose } = props;
    const [visible, setVisible] = useState(false);
    useImperativeHandle(ref, () => {
        return {
            onClose: () => setVisible(false),
            onOpen: () => setVisible(true),
        };
    });
    return (
        <Mask visible={visible} onMaskClick={() => setVisible(false)}>
            <div className="flex h-[100dvh] h-[100vh] items-center justify-center">
                <div className="mask-box w-[3.4rem] rounded-[10px] bg-[#fff] p-[0.1389rem] text-[#000]">
                    <div className={"mb-[10px] flex"}>
                        <div className="flex-1 text-center text-[0.18rem] font-bold text-[#009d81]">
                            {title}
                        </div>
                        <span
                            className="iconfont icon-guanbi"
                            onClick={() => {
                                onBeforeClose && onBeforeClose();
                                setVisible(false);
                            }}
                        ></span>
                    </div>
                    <div className="popUpMain">{children}</div>
                </div>
            </div>
        </Mask>
    );
});

export default TipsModal;