import React, { useState } from 'react';

export default function EmailVerificationModal({ isOpen, onSubmit, onClose }) {

    const [verificationCode, setVerificationCode] = useState('');

    return isOpen && (
        <div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center px-5 lg:px-0" >
            <div className="glassmorphism p-4 w-full lg:w-1/4" >
                <h2 className="text-lg font-bold mb-2 font-montserrat text-white">Vérification de l'email</h2>
                <p className="font-montserrat text-white">Un email de vérification a été envoyé à votre adresse email. Veuillez vérifier votre boîte de réception.</p>
                <input 
                    type="text"
                    placeholder="Entrez le code de vérification" 
                    className="glassmorphism w-full px-4 py-2 mt-4 text-white" 
                    value={verificationCode}
                    onChange={(e) => setVerificationCode(e.target.value)}
                />
                <button className="bg-primary px-3 py-2 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer mt-2" onClick={() => {
                    
                    onSubmit(verificationCode)
                }}>Vérifier</button>
            </div>
        </div>
    );
}