import React from "react";
import RenderOverlay from "./Overlay";
import { LogoIconLarge } from "../icons/Logo";

interface LoadingPageProps {
  progress: number; // Expect progress as a percentage (0-100)
}

const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
  const validatedProgress = Math.min(100, Math.max(0, progress));

  return (
    <RenderOverlay>
      <div className="loading-wrapper">
        <div className="loading-container">
          <div className="project-name">Untitled</div>
          <div className="loading-hero-container">
            <div className="logo">
              <LogoIconLarge />
            </div>
            <div className="content">Entering A New World of Dwinzo</div>
          </div>
          <div className="progress-container">
            <div className="progress-value">{validatedProgress}%</div>
            <div className="progress-indicator-container">
              <div
                className="progress-bar"
                style={{ width: `${validatedProgress}%` }} // Dynamic width
              ></div>
            </div>
          </div>
        </div>
      </div>
    </RenderOverlay>
  );
};

export default LoadingPage;
