/* @component-map
 * App — Main container, handles view switching between form and results
 * WorldForm — The 5-question form for configuring world parameters
 * WorldResults — Displays generated world description, names, and details
 * @end-component-map */

import { WorldForm } from './components/WorldForm.jsx';
import { useState } from 'react';
import { WorldResults } from './components/WorldResults.jsx';

function App() {
  const [view, setView] = useState('form');
  const [worldData, setWorldData] = useState(null);

  function handleGenerated(data) {
    setWorldData(data);
    setView('results');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  function handleReset() {
    setView('form');
    setWorldData(null);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }

  return (
    <div className="container">
      <header>
        <div className="icon">🌍</div>
        <h1>World &amp; Character Generator</h1>
        <p>Answer five questions. Receive a world.</p>
      </header>
      {view === 'form' && <WorldForm onGenerated={handleGenerated} />}
      {view === 'results' && <WorldResults data={worldData} onReset={handleReset} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);