App.tsx

import React, { useState } from 'react';
import Editor from './components/Editor';
import Teleprompter from './components/Teleprompter';
import { AppState } from './types';

const App: React.FC = () => {
  const [mode, setMode] = useState<AppState>(AppState.EDITING);
  const [script, setScript] = useState<string>(
    "Bonjour et bienvenue. Ceci est une démonstration de l'application FlowPrompter. Elle écoute ce que vous dites et met en surbrillance les mots au fur et à mesure. C'est idéal pour les présentations, les discours ou les vidéos YouTube. Essayez de lire ce texte à haute voix pour voir la magie opérer."
  );

  const startPresentation = () => {
    setMode(AppState.READING);
  };

  const backToEditor = () => {
    setMode(AppState.EDITING);
  };

  return (
    <main className="min-h-screen bg-zinc-950 text-zinc-100 selection:bg-indigo-500/30">
      {mode === AppState.EDITING ? (
        <Editor 
          value={script} 
          onChange={setScript} 
          onStart={startPresentation} 
        />
      ) : (
        <Teleprompter 
          script={script} 
          onBack={backToEditor} 
        />
      )}
    </main>
  );
};

export default App;