import React, { useEffect, useState } from 'react';
import '../index.css';

interface LoadingScreenProps {
  onLoaded: () => void;
}

const LoadingScreen: React.FC<LoadingScreenProps> = ({ onLoaded }) => {
  const [fading, setFading] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setFading(true);
      setTimeout(onLoaded, 500); // Wait for fade out animation
    }, 2500); // Show loading screen for 2.5 seconds

    return () => clearTimeout(timer);
  }, [onLoaded]);

  return (
    <div className={`loading-screen ${fading ? 'fade-out' : ''}`}>
      <div className="loader-content">
        <div className="spinner"></div>
        <h1 className="loading-text">Welcome</h1>
      </div>
    </div>
  );
};

export default LoadingScreen;