import { useRef } from "react"

import type { ComponentType } from "react"

export function VideoPlayPause(Component): ComponentType {

return (props) => {

const containerRef = useRef<HTMLDivElement>(null)

const toggleVideo = () => {

const video = containerRef.current?.querySelector("video")

if (!video) return

if (video.paused) {

video.play()

} else {

video.pause()

}

}

return (

<div

ref={containerRef}

onClick={toggleVideo}

style={{

width: "100%",

height: "100%",

cursor: "pointer",

}}

>

<Component {...props} />

</div>

)

}

}