import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
import { Dialog } from "antd-mobile";

export const handleShowVideos = (video) => {
  Dialog.className = "videoMask";
  Dialog.show({
    title: "",
    content: (
      <div className="flex flex-col gap-2">
        <div className="flex w-full justify-end">
          <div
            className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
            key="closeBtn"
            onClick={() => Dialog.clear()}
          >
            <FontAwesomeIcon icon={faClose} size="2xl" />
          </div>
        </div>
        <div className="my-4">
          <video
            width="100%"
            height="100%"
            controls
            className="w-screen h-[70vh] rounded-lg object-contain"
            poster={video.url}
          >
            <source src={video.mp4} type="video/mp4" />
            您的浏览器不支持 Video 标签。
          </video>
        </div>
        <div
          className="flex w-12 h-12 justify-center items-center bg-[#33333348] rounded-full"
          key="closeBtn"
          // onClick={handleSeeAllPhotos}
        >
          <FontAwesomeIcon icon={faSave} size="2xl" />
        </div>
      </div>
    ),
    bodyStyle: {
      background: "none",
      maxHeight: "none",
      height: "100%",
    },
  });
};