import { useCallback } from "react";
import { usePlayer } from "../providers/PlayerProvider";
import styles from "../styles/Modal.module.css";

interface RegistrationModalProps {
  isOpen: boolean;
  setIsOpen: (val: boolean) => void
}

const RegistrationModal = ({ isOpen, setIsOpen }: RegistrationModalProps) => {
  const { register } = usePlayer()
  const onRegister = useCallback((mode: "ETH" | "RGCVII") => {
    register(mode);
    setIsOpen(false);
  }, [register, setIsOpen])
  if (!isOpen) return null;
  return <div className={styles.modal}>
    <h2>Insert coins to continue</h2>
    <div>
      <button onClick={() => onRegister("RGCVII")}>50 RGCVII</button>
      <button onClick={() => onRegister("ETH")}>0.0005 ETH</button>
    </div>
  </div>
}

export default RegistrationModal
