import { IconPlay } from "@/components/Icons";
import Image from "next/image";
import { useState } from "react";

interface VideoModalProps {
  videoUrl: string;
  videoImage: any;
}

export default function VideoModal (props:VideoModalProps) {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <>
      <div
        className="group relative col-span-6 flex items-center justify-center"
        onClick={openModal}
      >
        <Image src={props.videoImage} alt="video" className="max-w-full" />
        <IconPlay className="z-1 absolute h-14 w-14 transition-all duration-200 group-hover:scale-150" />
      </div>

      {/* Modal */}
      {isOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50">
          <div className="relative w-full max-w-3xl bg-white shadow-lg mx-4">
            <button
              onClick={closeModal}
              className="absolute right-0 -top-8 text-xl text-blue-medium hover:text-blue-light"
            >
              ✕
            </button>
            <div className="relative pt-[56.25%]">
              <iframe
                src={props.videoUrl}
                className="h-full w-full border-0 absolute top-0 left-0"
                allow="autoplay; fullscreen"
              ></iframe>
            </div>
          </div>
        </div>
      )}
    </>
  );
};