import { useCallback } from "react";
import { usePlayer } from "../providers/PlayerProvider";
import styles from "../styles/Modal.module.css";
import bgStyles from "../styles/Background.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={bgStyles.leaderboardOverlay}><div className={styles.modal}>
    <span className={styles.closeBtn} onClick={() => setIsOpen(false)}>x</span>
    <h2 className={styles.textCenter}>Insert coins to continue</h2>
    <div>
      <button onClick={() => onRegister("RGCVII")}>500 RGCVII</button>
      <button onClick={() => onRegister("ETH")}>0.0005 ETH</button>
    </div>
  </div></div>
}

export default RegistrationModal