import React from 'react';
import TranscriptionPage from './pages/TranscriptionPage';
import WelcomeModal from './components/WelcomeModal';
import { useTranscriptionStore } from './stores/transcriptionStore';
import { trackWelcomeModalClose } from './analytics/gaEvents';
import Analytics from './analytics/Analytics';

const App: React.FC = () => {
  const { showWelcomeModal, setShowWelcomeModal } = useTranscriptionStore();

  const handleCloseWelcomeModal = () => {
    trackWelcomeModalClose();
    setShowWelcomeModal(false);
  };

  return (
    <div className="App">
      <TranscriptionPage />
      <WelcomeModal
        isOpen={showWelcomeModal}
        onClose={handleCloseWelcomeModal}
      />
      <Analytics />
    </div>
  );
};

export default App;