import CrossIcon from "../icons/CrossIcon";
import useStore from "../store/store";

type VideoModalProps = {
  path?: string;
};

const VideoModal = ({ path }: VideoModalProps) => {
  const { setModal } = useStore();

  const handleOnCloseClick = () => {
    setModal(null);
  };

  return (
    <div
      className="fixed w-screen h-screen bg-[#00000099] z-30 flex justify-center items-center"
      onClick={handleOnCloseClick}
    >
      <button
        className="absolute top-5 right-10 text-white"
        onClick={handleOnCloseClick}
      >
        <CrossIcon />
      </button>

      <div className="h-[500px] w-[960px]">
        <iframe
          id="youtubeiframe318424844"
          className=""
          width="100%"
          height="100%"
          src={path}
          allowFullScreen={true}
        ></iframe>
      </div>
    </div>
  );
};

export default VideoModal;
