import React from "react";
import { PlayCircleOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";
import { baseURL } from "@/utils/http";
import store from "@/store";

type Props = {
  width?: number;
  height?: number;
  src: string;
};

function VideoLook({ src, width = 100, height = 100 }: Props) {
  return (
    <div className={styles.VideoLook} style={{ width, height }}>
      <div
        className="videoLookBox"
        onClick={() =>
          store.dispatch({ type: "login/lookVideo", payload: src })
        }
      >
        <div className="videoCover">
          <video src={baseURL + src}></video>
          <div className="videoInco">
            <PlayCircleOutlined />
            &nbsp;
            <div>预览</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const MemoVideoLook = React.memo(VideoLook);

export default MemoVideoLook;
