import React from "react"

import Markdown from "@/components/markdown"

import * as styles from "./index.module.scss"
import VideoCard from "@/components/video-card"
import VideoPlayer from "@/components/video-play"

const TalkSection = ({
  title,
  content,
  media,
  mediaCover,
  titleLink,
}: EventTalk) => {
  const [modalShow, setModalShow] = React.useState(false)
  const [videoLink, setVideoLink] = React.useState("")
  const videoModalShow = (link?: string) => {
    setVideoLink(link || "")
    setModalShow(!modalShow)
  }

  let videoDOM
  if (media.url.length !== 0) {
    videoDOM = (
      <VideoCard url={media.url} image={{ media: mediaCover }} title="" />
    )
  } else {
    videoDOM = <img src={mediaCover.url} alt="" />
  }

  return (
    <div className={styles.wrapper}>
      <div className={styles.left}>{videoDOM}</div>
      <div className={styles.right}>
        <div className={styles.title}>
          <a href={titleLink}>{title}</a>
        </div>
        <div className={styles.content}>
          <Markdown body={content} needAnchor={true} />
        </div>
      </div>
      <VideoPlayer link={videoLink} close={videoModalShow} play={modalShow} />
    </div>
  )
}

export default TalkSection