import React, { useState, useEffect } from "react";
import "./LoadingScreen.css";

const LoadingScreen = ({
  progress = 0,
  statusText = "Initializing Universe...",
}) => {
  return (
    <div id="loadingScreen" className="loading-screen">
      <div className="loading-content">
        <h1 className="game-title">GALAXY STRIKE ONLINE</h1>

        <div className="loading-bar">
          <div
            className="loading-progress"
            style={{ width: `${progress}%`, transition: "width 0.3s ease" }}
          ></div>
        </div>

        <p className="loading-text">{statusText}</p>
      </div>
    </div>
  );
};

export default LoadingScreen;
