const { useState, useEffect } = React;



    //this function is to check if login or not
const CheckCredentials = () => {
  const [islogin, setIsLogin] = useState(0);
  const [isMessageCount, setIsMessageCount] = useState('');
    const [isLoading, setIsLoading]= useState(true)


useEffect(() => {
     fetch('https://asianlovemates.com/members/mailbox')
 .then(response => response.text())
 .then(html => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const badge = doc.querySelector('.badge-danger');
  setIsMessageCount(badge.textContent);
  setIsLogin(1);
  console.log(badge.textContent);
 })
 .catch(error => console.error('Error fetching data:', error));

      }, []);


  return (
   <>
   
{islogin > 0 ? (

<>
<div className="col-5 d-flex justify-content-end pe-4 position-relative">
   {isMessageCount && <div className="messageCount">{isMessageCount}</div>}
<button className="login "><a href="/members/mailbox">  Messages</a></button>
</div>

<div className="col-5 d-flex justify-content-start position-relative">
 <button className="sign-up"><a href="/members/home" className="text-white">Account</a></button>
</div>
</>

) : (
 <>

<div className="col-5 d-flex justify-content-end pe-4 position-relative">
 <button className="login"><a href="/members/login" >Log In</a></button>
</div>

<div className="col-5 d-flex justify-content-start position-relative">
 <button className="sign-up"><a href="/members/login" className="text-white">Sign Up</a></button>
</div>

</>
)}


    </>
  )

};



    ReactDOM.render(<CheckCredentials />, document.getElementById('accountNav'));