import { useGame } from "../../context/GameContext.js";

export const OfflineModal = (): React.JSX.Element | null => {
  const { offlineGold, dismissOfflineGold } = useGame();

  if (offlineGold <= 0) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <h2>Welcome back!</h2>
        <p>
          Your adventurers kept working whilst you were away and earned{" "}
          <strong>🪙 {offlineGold.toFixed(0)} gold</strong>!
        </p>
        <p className="modal-note">Offline progress is calculated up to 8 hours.</p>
        <button
          className="modal-close-button"
          onClick={dismissOfflineGold}
          type="button"
        >
          Collect!
        </button>
      </div>
    </div>
  );
};