import * as React from "react"
import cls from "classnames"

import Background from "@/components/background"
import VideoPlayer from "@/components/video-play"

import * as styles from "./index.module.scss"

const { useState } = React

interface IProps {
  image: {
    media: BackgroundImg
  }
  url: string
  title?: string
  backgroundColor?: string
}

const VideoCard: React.FC<IProps> = ({ image, url, title, backgroundColor = "rgba(36, 43, 72, 0.4)" }) => {
  const [isPlaying, setPlayState] = useState(false)
  const close = () => {
    setPlayState(!isPlaying)
  }
  return (
    <>
      <Background image={image} className={styles.backGroundContainer}>
        <div
          className={cls(
            "is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
          )}
        >
          <div
            className={cls(
              styles.contentWrapper,
              "is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
            )}
            style={{ backgroundColor }}
          >
            <h1 className="px-4">{title}</h1>
            <i
              className="iconfont icon-play"
              style={{ fontSize: "5.5rem" }}
              onClick={() => {
                setPlayState(true)
              }}
            />
          </div>
        </div>
      </Background>
      <VideoPlayer link={url} play={isPlaying} close={close} />
    </>
  )
}

export default VideoCard