import { CloseIcon } from '../../components/icons/CloseIcon';
import { useModalStore } from '../../store/modalStore';

interface VideoModalProps {
  link: string;
}

export function VideoModal({ link }: VideoModalProps) {
  const { setModal } = useModalStore();

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

  return (
    <div className="w-screen h-screen absolute z-[110] top-0 left-0 overflow-hidden flex justify-center items-center">
      <div className="flex items-center justify-center w-full aspect-video">
        <button
          className="p-4 rounded-full border absolute top-4 right-4 z-[99] cursor-pointer"
          onClick={handleOnCloseClick}
        >
          <CloseIcon />
        </button>
        <video
          src={link}
          className="h-full aspect-videop"
          autoPlay
          muted
          loop
          playsInline
        />
      </div>
    </div>
  );
}
