import * as React from "react"
import { ListImg, Icon } from "@/components"
import * as styles from "./index.module.scss"

export type VideoItem = {
  image: imgMedia
  title: string
  link: string
  videoModalShow: (link?: string) => void
}

export default (props: VideoItem): React.ReactElement => {
  const { image, title, link, videoModalShow } = props

  return (
    <div className={styles.inner} onClick={() => videoModalShow(link)}>
      <ListImg className={styles.imgContent} imgInfo={image} />
      <div className={styles.videoMask}>
        <h4>{title}</h4>
        <Icon name="play" className={styles.playIcon} />
      </div>
    </div>
  )
}