import { useEffect, useState } from "react";
import { IAuthenData, miniAppWrapper } from "..";

export function MiniGameExample() {
  const [userData, setUserData] = useState<IAuthenData | null>();

  useEffect(() => {
    miniAppWrapper
      .requestAuthData()
      .then((data) => {
        setUserData(data);
      })
      .catch((err) => {
        console.error("Error fetching auth data", err);
      });
  }, []);

  const handleClose = () => {
    miniAppWrapper.closeMiniApp();
  };

  return (
    <div>
      <h1>Mini Game</h1>
      {userData ? (
        <div>
          <p>
            Welcome {userData.user.first_name} {userData.user.last_name}
          </p>
          <p>Total Paws: {userData.tapStatus?.totalPawsEarned}</p>
        </div>
      ) : (
        <p>Loading user data...</p>
      )}

      {/* Game logic goes here */}

      <button onClick={handleClose}>Close Game</button>
    </div>
  );
}