import { Modal } from "antd"
import React, { useState } from "react"
import '../../tencentAdPutIn/index.less'

interface Props {
    children: (onPlay: () => void) => JSX.Element
    videoUrl: string
}
const PlayVideo: React.FC<Props> = ({ children, videoUrl }) => {

    /*******************************/
    const [visible, setVisible] = useState<boolean>(false)
    /*******************************/

    return <>
        {children(() => { setVisible(true) })}

        {visible && <div
            onClick={(e) => {
                e.stopPropagation()
                e.preventDefault()
            }}
        >
            <Modal
                open={visible}
                onCancel={() => setVisible(false)}
                footer={null}
                width={400}
                className="modalResetCss"
                bodyStyle={{ padding: '50px 10px 5px' }}
            >
                <video src={videoUrl} controls style={{ width: '100%' }}></video>
            </Modal>
        </div>}
    </>
}

export default React.memo(PlayVideo)