import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import App from './App.tsx';
import './index.css';
import LoadingScreen from './components/ui/LoadingScreen.tsx';

const Root = () => {
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    // Simulate loading time for demo purposes
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 2000);
    
    return () => clearTimeout(timer);
  }, []);
  
  return (
    <>
      {isLoading ? (
        <LoadingScreen message="Building your social skills journey..." />
      ) : (
        <App />
      )}
    </>
  );
};

createRoot(document.getElementById("root")!).render(<Root />);