import React from 'react';
import styles from './index.less';
import { Image, Popover } from '@easyv/antd';
import defaultThumb from 'images/sourceImg.png';

// TODO视频素材是否需要悬浮大图？
function VideoComponent({ url, isSelect = false, title }: { url: string; isSelect?: boolean; title?: string }) {
  return (
    <div className={styles.video}>
      {isSelect ? (
        <Popover
          content={
            <div className={styles.content}>
              <Image preview={false} src={url} fallback={defaultThumb}></Image>
            </div>
          }
          mouseEnterDelay={2}
          placement="top"
          title={title}
          trigger="hover"
          overlayClassName={styles.preview}>
          <Image preview={false} src={url} fallback={defaultThumb}></Image>
        </Popover>
      ) : (
        <Image preview={false} src={url} fallback={defaultThumb}></Image>
      )}
    </div>
  );
}

export default VideoComponent;
